1 | const webpack = require("webpack");
|
2 | const DeadCodePlugin = require("webpack-deadcode-plugin");
|
3 | const HtmlWebpackPlugin = require("html-webpack-plugin");
|
4 | const { styleLoader } = require("es6-css-loader");
|
5 |
|
6 | module.exports = {
|
7 | entry: [`webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr`, "./index.js"],
|
8 | target: "web",
|
9 | devtool: "source-map",
|
10 |
|
11 | output: {
|
12 | path: __dirname,
|
13 | filename: "bundle.js"
|
14 | },
|
15 |
|
16 | mode: "development",
|
17 |
|
18 | optimization: {
|
19 | usedExports: true
|
20 | },
|
21 |
|
22 | module: {
|
23 | rules: [
|
24 | {
|
25 | test: /\.js|jsx$/,
|
26 | loader: "babel-loader",
|
27 | options: {
|
28 | babelrc: false,
|
29 | presets: [],
|
30 | plugins: [
|
31 | [
|
32 | "@babel/plugin-transform-react-jsx",
|
33 | {
|
34 | pragma: "createElement"
|
35 | }
|
36 | ],
|
37 | "@babel/plugin-syntax-dynamic-import",
|
38 | "@babel/plugin-syntax-import-meta",
|
39 | "@babel/plugin-proposal-class-properties",
|
40 | "@babel/plugin-proposal-json-strings",
|
41 | [
|
42 | "@babel/plugin-proposal-decorators",
|
43 | {
|
44 | legacy: true
|
45 | }
|
46 | ],
|
47 | "@babel/plugin-proposal-function-sent",
|
48 | "@babel/plugin-proposal-export-namespace-from",
|
49 | "@babel/plugin-proposal-numeric-separator",
|
50 | "@babel/plugin-proposal-throw-expressions"
|
51 | ]
|
52 | }
|
53 | },
|
54 | {
|
55 | test: /\.css$/,
|
56 | use: [
|
57 | styleLoader,
|
58 | {
|
59 | loader: "css-loader",
|
60 | options: {
|
61 | modules: true
|
62 | }
|
63 | }
|
64 | ]
|
65 | }
|
66 | ]
|
67 | },
|
68 | plugins: [
|
69 | new DeadCodePlugin({
|
70 | patterns: ["*.(js|css)"],
|
71 | exclude: ["**/node_modules/**"]
|
72 | }),
|
73 | new webpack.NamedModulesPlugin(),
|
74 | new webpack.HotModuleReplacementPlugin(),
|
75 | new HtmlWebpackPlugin({
|
76 | template: "template.html"
|
77 | })
|
78 | ]
|
79 | };
|