From 94262f556b3c01f2d96d0285761fde53b96a4e76 Mon Sep 17 00:00:00 2001 From: "Michael \"Z\" Goddard" Date: Mon, 7 May 2018 14:46:55 -0400 Subject: [PATCH] Update to webpack 4 --- package.json | 20 +++++++++++--------- webpack.config.js | 47 ++++++++++++++++++++++++++++------------------- 2 files changed, 39 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 94658acec5d..e6db8573c16 100644 --- a/package.json +++ b/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": { diff --git a/webpack.config.js b/webpack.config.js index a9424dba86c..cba33b005d7 100644 --- a/webpack.config.js +++ b/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'