Merge pull request #2000 from mzgoddard/webpack-4

Update to webpack 4

package.json

@@ -39,8 +39,8 @@
     "buffer-loader": "0.0.1",
     "chromedriver": "2.38.2",
     "classnames": "2.2.5",
-    "copy-webpack-plugin": "^4.3.0",
-    "css-loader": "^0.28.7",
+    "copy-webpack-plugin": "^4.5.1",
+    "css-loader": "^0.28.11",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "1.1.1",
     "es6-object-assign": "1.1.0",
@@ -52,7 +52,7 @@
     "get-float-time-domain-data": "0.1.0",
     "get-user-media-promise": "1.1.1",
     "gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
-    "html-webpack-plugin": "^3.0.5",
+    "html-webpack-plugin": "^3.2.0",
     "immutable": "3.8.2",
     "jest": "^21.0.0",
     "lodash.bindall": "4.4.0",
@@ -65,11 +65,11 @@
     "mkdirp": "^0.5.1",
     "platform": "1.3.5",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.5",
+    "postcss-loader": "^2.1.4",
     "postcss-simple-vars": "^4.0.0",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
-    "raw-loader": "0.5.1",
+    "raw-loader": "^0.5.1",
     "react": "16.2.0",
     "react-contextmenu": "2.9.2",
     "react-dom": "16.2.0",
@@ -93,18 +93,20 @@
     "scratch-l10n": "2.0.20180108132626",
     "scratch-paint": "0.2.0-prerelease.20180504180528",
     "scratch-render": "0.1.0-prerelease.20180502115145",
-    "scratch-svg-renderer": "0.1.0-prerelease.20180423193917",
     "scratch-storage": "0.4.1",
+    "scratch-svg-renderer": "0.1.0-prerelease.20180423193917",
     "scratch-vm": "0.1.0-prerelease.1525460669",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
-    "style-loader": "^0.20.0",
+    "style-loader": "^0.21.0",
     "svg-to-image": "1.1.3",
     "text-encoding": "0.6.4",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "wav-encoder": "1.3.0",
     "web-audio-test-api": "^0.5.2",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.7",
+    "webpack": "^4.6.0",
+    "webpack-cli": "^2.0.15",
+    "webpack-dev-server": "^3.1.3",
     "xhr": "2.4.1"
   },
   "jest": {

webpack.config.js

@@ -5,6 +5,7 @@ var webpack = require('webpack');
 // Plugins
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 // PostCss
 var autoprefixer = require('autoprefixer');
@@ -12,6 +13,7 @@ var postcssVars = require('postcss-simple-vars');
 var postcssImport = require('postcss-import');
 
 const base = {
+    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
     devtool: 'cheap-module-source-map',
     devServer: {
         contentBase: path.resolve(__dirname, 'build'),
@@ -61,23 +63,25 @@ const base = {
             }]
         }]
     },
-    plugins: [].concat(process.env.NODE_ENV === 'production' ? [
-        new webpack.optimize.UglifyJsPlugin({
-            include: /\.min\.js$/,
-            minimize: true
-        })
-    ] : [])
+    optimization: {
+        minimizer: [
+            new UglifyJsPlugin({
+                include: /\.min\.js$/
+            })
+        ]
+    },
+    plugins: []
 };
 
 module.exports = [
     // to run editor examples
     defaultsDeep({}, base, {
         entry: {
-            lib: ['react', 'react-dom'],
-            gui: './src/playground/index.jsx',
-            blocksonly: './src/playground/blocks-only.jsx',
-            compatibilitytesting: './src/playground/compatibility-testing.jsx',
-            player: './src/playground/player.jsx'
+            'lib.min': ['react', 'react-dom'],
+            'gui': './src/playground/index.jsx',
+            'blocksonly': './src/playground/blocks-only.jsx',
+            'compatibilitytesting': './src/playground/compatibility-testing.jsx',
+            'player': './src/playground/player.jsx'
         },
         output: {
             path: path.resolve(__dirname, 'build'),
@@ -98,36 +102,41 @@ module.exports = [
                 }
             ])
         },
+        optimization: {
+            splitChunks: {
+                chunks: 'all',
+                name: 'lib.min'
+            },
+            runtimeChunk: {
+                name: 'lib.min'
+            }
+        },
         plugins: base.plugins.concat([
             new webpack.DefinePlugin({
                 'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"',
                 'process.env.DEBUG': Boolean(process.env.DEBUG),
                 'process.env.GA_ID': '"' + (process.env.GA_ID || 'UA-000000-01') + '"'
             }),
-            new webpack.optimize.CommonsChunkPlugin({
-                name: 'lib',
-                filename: 'lib.min.js'
-            }),
             new HtmlWebpackPlugin({
-                chunks: ['lib', 'gui'],
+                chunks: ['lib.min', 'gui'],
                 template: 'src/playground/index.ejs',
                 title: 'Scratch 3.0 GUI',
                 sentryConfig: process.env.SENTRY_CONFIG ? '"' + process.env.SENTRY_CONFIG + '"' : null
             }),
             new HtmlWebpackPlugin({
-                chunks: ['lib', 'blocksonly'],
+                chunks: ['lib.min', 'blocksonly'],
                 template: 'src/playground/index.ejs',
                 filename: 'blocks-only.html',
                 title: 'Scratch 3.0 GUI: Blocks Only Example'
             }),
             new HtmlWebpackPlugin({
-                chunks: ['lib', 'compatibilitytesting'],
+                chunks: ['lib.min', 'compatibilitytesting'],
                 template: 'src/playground/index.ejs',
                 filename: 'compatibility-testing.html',
                 title: 'Scratch 3.0 GUI: Compatibility Testing'
             }),
             new HtmlWebpackPlugin({
-                chunks: ['lib', 'player'],
+                chunks: ['lib.min', 'player'],
                 template: 'src/playground/index.ejs',
                 filename: 'player.html',
                 title: 'Scratch 3.0 GUI: Player Example'