update webpack config syntax

YaleDHLab · Nov 30, 2020 · efd7cd5 · efd7cd5
1 parent 150151b
commit efd7cd5
Showing 1 changed file with 54 additions and 41 deletions.
diff --git a/server/webpack.config.js b/server/webpack.config.js
@@ -1,41 +1,17 @@
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const merge = require('webpack-merge');
-const webpack = require('webpack'); 
+const webpack = require('webpack');
 const path = require('path');
 
 const paths = {
   src: path.resolve(__dirname, '..', 'src'),
   build: path.resolve(__dirname, '..', 'build')
 }
 
-const uglifyConfig = {
-  sourceMap: false,
-  warnings: false,
-  mangle: true,
-  minimize: true
-}
-
-const htmlConfig = {
-  template: path.join(paths.src, 'index.html'),
-  minify : {
-    collapseWhitespace: true
-  }
-}
-
-const cssConfig = {
-  cssProcessorOptions: {
-    safe: true,
-  }
-}
-
-const cleanConfig = {
-  root: path.resolve(__dirname, '..')
-}
-
 const pathsToCopy = [
   {
     context: path.join(paths.src),
@@ -45,14 +21,19 @@ const pathsToCopy = [
 ]
 
 const common = {
-  entry: path.join(paths.src, 'index'),
+  entry: {
+    app: path.join(paths.src, 'index.js'),
+  },
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
   },
   output: {
-    path: paths.build,
+    path: path.join(paths.build, 'assets'),
     filename: 'bundle.[hash].js',
-    publicPath: '/'
+    publicPath: '/assets/',
+  },
+  performance: {
+    hints: false,
   },
   module: {
     rules: [
@@ -62,7 +43,7 @@ const common = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['env']
+            presets: ['@babel/env']
           }
         }
       },
@@ -78,10 +59,15 @@ const common = {
       },
       {
         test: /\.(css)$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader'
-        })
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: process.env.NODE_ENV === 'development',
+            },
+          },
+          'css-loader',
+        ],
       },
       {
         test: /\.(png|jpg|gif|svg|otf)$/,
@@ -96,31 +82,58 @@ const common = {
     ]
   },
   plugins: [
-    new CleanWebpackPlugin([paths.build], cleanConfig),
-    new HtmlWebpackPlugin(htmlConfig),
-    new ExtractTextPlugin('styles.[contenthash].css'),
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      filename: path.join('index.html'),
+      template: path.join(paths.src, 'index.html'),
+      chunks: ['app'],
+      minify : {
+        collapseWhitespace: true,
+      },
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[id].css',
+      ignoreOrder: false,
+    }),
     new CopyWebpackPlugin(pathsToCopy),
   ]
 };
 
 const devSettings = {
+  output: {
+    path: path.join(paths.build),
+    filename: 'bundle.[hash].js',
+    publicPath: '/',
+  },
   devtool: 'eval-source-map',
   devServer: {
     historyApiFallback: true,
+    quiet: false,
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin(),
+    new CleanWebpackPlugin(),
   ]
 }
 
 const prodSettings = {
+  optimization: {
+    minimize: true,
+  },
   devtool: 'source-map',
   plugins: [
+    new HtmlWebpackPlugin({
+      filename: path.join('..', 'index.html'),
+      template: path.join(paths.src, 'index.html'),
+      chunks: ['app'],
+      minify : {
+        collapseWhitespace: true,
+      },
+    }),
     new webpack.DefinePlugin({ 'process.env': {
       NODE_ENV: JSON.stringify('production')
     }}),
-    new webpack.optimize.UglifyJsPlugin(uglifyConfig),
-    new OptimizeCssAssetsPlugin(cssConfig),
+    new OptimizeCssAssetsPlugin(),
     new webpack.optimize.OccurrenceOrderPlugin(),
   ]
 }