Update Webpack configuration

wojtekmaj · May 17, 2020 · 0e33c16 · 0e33c16
1 parent 683bffb
commit 0e33c16
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 101 deletions.
diff --git a/test/.babelrc b/test/.babelrc
@@ -1,16 +1,12 @@
 {
   "presets": [
-    [
-      "@babel/env",
-      {
-        "modules": false
-      }
-    ],
-    "@babel/react"
+    ["@babel/preset-env", {
+      "modules": false
+    }],
+    "@babel/preset-react"
   ],
   "plugins": [
-    "@babel/transform-runtime",
-    "@babel/proposal-class-properties",
-    "react-hot-loader/babel"
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-proposal-class-properties"
   ]
 }
diff --git a/test/index.html b/test/index.html
@@ -7,6 +7,5 @@
   </head>
   <body>
     <div id="react-container"></div>
-    <script src="main.bundle.js"></script>
   </body>
 </html>
diff --git a/test/package.json b/test/package.json
@@ -4,8 +4,8 @@
   "description": "A test page for React-PDF.",
   "private": true,
   "scripts": {
-    "build": "webpack",
-    "start": "webpack-dev-server --config webpack.config.hot.js"
+    "build": "NODE_ENV=production webpack",
+    "start": "NODE_ENV=development webpack-dev-server"
   },
   "author": {
     "name": "Wojciech Maj",
@@ -28,12 +28,14 @@
     "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^1.0.0",
     "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^4.3.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "react-hot-loader": "^4.3.11",
     "style-loader": "^0.23.0",
     "url-loader": "^1.1.1",
-    "webpack": "^4.20.2",
+    "webpack": "^4.43.0",
     "webpack-cli": "^3.1.1",
     "webpack-dev-server": "^3.1.9"
   }

diff --git a/test/webpack.config.hot.js b/test/webpack.config.hot.js
diff --git a/test/webpack.config.js b/test/webpack.config.js
@@ -1,55 +1,95 @@
 const path = require('path');
-// eslint-disable-next-line import/no-unresolved
+
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const isProduction = process.env.NODE_ENV === 'production';
+const isDevelopment = !isProduction;
 
 module.exports = {
-  mode: 'production',
-  context: __dirname,
-  devtool: 'source-map',
-  entry: [
-    './index',
-  ],
+  mode: isProduction ? 'production' : 'development',
+  bail: isProduction,
+  context: path.join(__dirname),
+  entry: {
+    src: [
+      isDevelopment && 'react-hot-loader/patch',
+      './index.jsx',
+    ].filter(Boolean),
+  },
   output: {
-    path: path.join(__dirname, 'dist'),
-    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].[chunkhash:8].js',
   },
   resolve: {
     extensions: ['.js', '.jsx'],
   },
   module: {
     rules: [
       {
-        test: /\.pdf$/,
-        use: 'url-loader',
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              babelrcRoots: ['.', '../'],
+              plugins: [isDevelopment && 'react-hot-loader/babel'].filter(Boolean),
+            },
+          },
+        ],
+      },
+      isDevelopment && {
+        test: /\.jsx?$/,
+        include: /node_modules\/react-dom/,
+        use: 'react-hot-loader/webpack',
       },
       {
         test: /\.less$/,
         use: [
-          'style-loader',
+          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
           'css-loader',
           'less-loader',
         ],
       },
       {
         test: /\.css$/,
         use: [
-          'style-loader',
+          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
           'css-loader',
         ],
       },
       {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        options: { babelrcRoots: ['.', '../'] },
+        test: /\.pdf$/,
+        use: 'url-loader',
       },
-    ],
+    ].filter(Boolean),
   },
   plugins: [
     new CopyWebpackPlugin([
-      { from: './index.html' },
-      { from: './test.pdf' },
+      'test.pdf',
       { from: 'node_modules/pdfjs-dist/cmaps/', to: 'cmaps/' },
     ]),
-  ],
+    new HtmlWebpackPlugin({
+      template: 'index.html',
+    }),
+    isProduction && new MiniCssExtractPlugin({
+      filename: '[name].[chunkhash:8].css',
+      chunkFilename: '[name].[chunkhash:8].css',
+    }),
+  ].filter(Boolean),
+  optimization: {
+    moduleIds: 'named',
+  },
+  stats: {
+    assetsSort: '!size',
+    entrypoints: false,
+  },
+  devServer: {
+    compress: true,
+    historyApiFallback: true, // respond to 404s with index.html
+    host: 'localhost',
+    hot: true, // enable HMR on the server
+    port: 3000,
+  },
 };