質問編集履歴

1

追記

2020/03/16 03:29

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -201,3 +201,237 @@
201
201
  }
202
202
 
203
203
  ```
204
+
205
+ ## 追記
206
+
207
+ webpackの設定です。
208
+
209
+ ```
210
+
211
+ // webpack.config.json
212
+
213
+
214
+
215
+ require('@babel/register');
216
+
217
+ module.exports = require('./dev');
218
+
219
+ ```
220
+
221
+ ```
222
+
223
+ // dev.js
224
+
225
+
226
+
227
+ import path from 'path'
228
+
229
+
230
+
231
+ const src = path.resolve(__dirname, 'src')
232
+
233
+ const dist = path.resolve(__dirname, 'dist')
234
+
235
+
236
+
237
+ const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
238
+
239
+
240
+
241
+ module.exports = {
242
+
243
+ mode: "development",
244
+
245
+ entry: ['@babel/polyfill', src + '/index.tsx'],
246
+
247
+ output: {
248
+
249
+ path: dist,
250
+
251
+ filename: "main.js"
252
+
253
+ },
254
+
255
+ plugins: [
256
+
257
+ new HardSourceWebpackPlugin()
258
+
259
+ ],
260
+
261
+ module: {
262
+
263
+ rules: [
264
+
265
+ {
266
+
267
+ // css
268
+
269
+ test: /.css$/,
270
+
271
+ exclude: {
272
+
273
+ include: /node_modules/,
274
+
275
+ // quill.js
276
+
277
+ exclude: /node_modules/react-quill//
278
+
279
+ },
280
+
281
+ use: [
282
+
283
+ 'style-loader',
284
+
285
+ {
286
+
287
+ loader: 'css-loader',
288
+
289
+ options: {
290
+
291
+ url: false,
292
+
293
+ },
294
+
295
+ },
296
+
297
+ ],
298
+
299
+ },
300
+
301
+ {
302
+
303
+ // js
304
+
305
+ test: /.js$/,
306
+
307
+ exclude: /node_modules/,
308
+
309
+ use: [
310
+
311
+ {
312
+
313
+ loader: 'babel-loader',
314
+
315
+ options: {
316
+
317
+ presets: [['@babel/preset-env', { modules: false }]]
318
+
319
+ }
320
+
321
+ }
322
+
323
+ ]
324
+
325
+ },
326
+
327
+ {
328
+
329
+ // tsx
330
+
331
+ test: /.ts?$/,
332
+
333
+ use: "ts-loader",
334
+
335
+ },
336
+
337
+ {
338
+
339
+ // tsx
340
+
341
+ test: /.tsx?$/,
342
+
343
+ use: "ts-loader",
344
+
345
+ },
346
+
347
+ {
348
+
349
+ // image
350
+
351
+ test: /.(jpg|JPG|jpeg|png|PING|gif|mp3|svg|ttf|woff2|woff|eot)$/,
352
+
353
+ use: {
354
+
355
+ loader: "file-loader",
356
+
357
+ options: {
358
+
359
+ name: "[name].[ext]",
360
+
361
+ outputPath: "assets/img",
362
+
363
+ publicPath: path => "/assets/img/" + path
364
+
365
+ }
366
+
367
+ }
368
+
369
+ }
370
+
371
+ ]
372
+
373
+ },
374
+
375
+ resolve: {
376
+
377
+ extensions: [".ts", ".tsx", ".js", ".json"]
378
+
379
+ },
380
+
381
+ devServer: {
382
+
383
+ contentBase: './dist',
384
+
385
+ host: '0.0.0.0',
386
+
387
+ port: 3000,
388
+
389
+ inline: true,
390
+
391
+ historyApiFallback: true
392
+
393
+ }
394
+
395
+ };
396
+
397
+
398
+
399
+ ```
400
+
401
+ ```
402
+
403
+ // dist/index.html
404
+
405
+
406
+
407
+ <!DOCTYPE html>
408
+
409
+ <html lang="ja">
410
+
411
+ <head>
412
+
413
+ <meta charset="UTF-8">
414
+
415
+ <link rel="shortcut icon" href="./assets/img/logo.png">
416
+
417
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
418
+
419
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
420
+
421
+ <meta name="keywords" content="メモ,付箋,ブレインストーミング,共同編集">
422
+
423
+ <script defer src="/main.js"></script>
424
+
425
+ <title>THINK!</title>
426
+
427
+ </head>
428
+
429
+ <body>
430
+
431
+ <div id="root"></div>
432
+
433
+ </body>
434
+
435
+ </html>
436
+
437
+ ```