Merge pull request #98 from plone/webpack4

Upgrade to Webpack 4.
plone · Mar 12, 2018 · d1ebf96 · d1ebf96
2 parents 8281d7c + ee8ccbc
commit d1ebf96
Show file tree

Hide file tree

Showing 6 changed files with 1,061 additions and 266 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,7 @@
 * Added commenting @robgietema
 * Added tags @robgietema
 * Upgrade to React 16 @sneridagh
+* Upgrade to Webpack 4 @sneridagh
 
 ## 0.4.0 (2017-05-03)
 

diff --git a/package.json b/package.json
@@ -227,7 +227,8 @@
     "url-loader": "1.0.1",
     "uuid": "3.2.1",
     "warning": "3.0.0",
-    "webpack": "3.10.0"
+    "webpack": "4.1.1",
+    "webpack-cli": "2.0.11"
   },
   "devDependencies": {
     "autoprefixer-loader": "3.2.0",
@@ -259,13 +260,13 @@
     "eslint-plugin-react": "7.7.0",
     "estraverse": "4.2.0",
     "estraverse-fb": "1.3.2",
-    "extract-text-webpack-plugin": "3.0.2",
+    "extract-text-webpack-plugin": "4.0.0-beta.0",
     "flow-bin": "0.67.1",
     "image-webpack-loader": "4.1.0",
     "jest": "22.4.2",
     "jsdoc": "3.5.5",
     "json-loader": "0.5.7",
-    "node-sass": "4.7.2",
+    "node-sass": "4.8.1",
     "nodemon": "1.17.1",
     "npm-run-all": "4.1.2",
     "react-a11y": "1.0.0",
@@ -288,7 +289,7 @@
     "supertest-as-promised": "4.0.2",
     "timekeeper": "2.0.0",
     "webpack-bundle-analyzer": "2.11.1",
-    "webpack-dev-middleware": "2.0.4",
+    "webpack-dev-middleware": "3.0.1",
     "webpack-hot-middleware": "2.21.2"
   },
   "engines": {
@@ -305,5 +306,6 @@
   },
   "stylelint": {
     "extends": "stylelint-config-standard"
-  }
+  },
+  "sideEffects": false
 }
diff --git a/webpack/server.dev.js b/webpack/server.dev.js
@@ -29,11 +29,15 @@ const app = express();
 app.use(webpackDevMiddleware(compiler, serverOptions));
 app.use(webpackHotMiddleware(compiler));
 
-app.listen(port, (err) => {
+app.listen(port, err => {
   if (err) {
     debug.error(err);
   } else {
     debug.info('==> 🚧  Webpack development server listening on port %s', port);
-    debug.info('==> 💻  Open http://%s:%s in a browser to view the app.', config.host, config.port);
+    debug.info(
+      '==> 💻  Open http://%s:%s in a browser to view the app.',
+      config.host,
+      config.port,
+    );
   }
 });
diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js
@@ -76,6 +76,7 @@ const BASE_CSS_LOADER = {
 };
 
 module.exports = {
+  mode: 'development',
   devtool: 'inline-source-map',
   context: path.resolve(__dirname, '..'),
   entry: [
@@ -101,15 +102,6 @@ module.exports = {
           },
         ],
       },
-      {
-        test: /\.(json)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'json-loader',
-          },
-        ],
-      },
       {
         test: /\.less$/,
         use: [

diff --git a/webpack/webpack.config.prod.js b/webpack/webpack.config.prod.js
@@ -16,8 +16,7 @@ const BASE_CSS_LOADER = {
 };
 
 module.exports = {
-  // SourceMaps in production:
-  // https://webpack.js.org/configuration/devtool/#production
+  mode: 'production',
   devtool: 'source-map',
   context: path.resolve(__dirname, '..'),
   entry: {
@@ -40,15 +39,6 @@ module.exports = {
           },
         ],
       },
-      {
-        test: /\.(json)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'json-loader',
-          },
-        ],
-      },
       {
         test: /\.less$/,
         use: [
@@ -154,25 +144,18 @@ module.exports = {
       minimize: true,
       debug: false,
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        unused: true,
-        dead_code: true,
-        warnings: false,
-      },
-      sourceMap: true,
-    }),
     new webpack.HashedModuleIdsPlugin(),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      filename: 'vendor.[hash].js',
-      minChunks(module, count) {
-        const { context } = module;
-        return context && context.indexOf('node_modules') >= 0;
-      },
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-    }),
   ],
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          chunks: 'initial',
+          test: path.resolve(__dirname, 'node_modules'),
+          name: 'vendor',
+          enforce: true,
+        },
+      },
+    },
+  },
 };