From a2006a72859df7cc5aed11bf0d59a4207b526d7c Mon Sep 17 00:00:00 2001 From: Will O'Beirne Date: Tue, 27 Feb 2018 13:33:46 -0500 Subject: [PATCH] Initial attempt at webpack 4 upgrade, still not working. --- package.json | 23 +++++++++++---------- webpack_config/devServer.js | 2 +- webpack_config/makeConfig.js | 31 +++++++++++++---------------- webpack_config/plugins/serverLog.js | 31 ++++++++++++++--------------- 4 files changed, 42 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index c67a4e31..4426c6f0 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "ethereumjs-util": "5.1.4", "ethereumjs-wallet": "0.6.0", "font-awesome": "4.7.0", - "hard-source-webpack-plugin": "0.5.16", "hdkey": "0.8.0", "idna-uts46": "1.1.0", "jsonschema": "1.2.2", @@ -92,8 +91,9 @@ "file-loader": "1.1.10", "friendly-errors-webpack-plugin": "1.6.1", "glob": "7.1.2", + "hard-source-webpack-plugin": "0.6.0", "hoist-non-react-statics": "2.5.0", - "html-webpack-plugin": "2.30.1", + "html-webpack-plugin": "github:webpack-contrib/html-webpack-plugin#1dee37e", "husky": "0.14.3", "image-webpack-loader": "4.1.0", "jest": "22.1.4", @@ -126,26 +126,27 @@ "typescript": "2.6.2", "url-loader": "0.6.2", "url-search-params-polyfill": "2.0.3", - "webpack": "3.11.0", + "webpack": "4.0.1", + "webpack-cli": "2.0.9", "webpack-dev-middleware": "2.0.6", "webpack-hot-middleware": "2.21.0", "webpack-sources": "1.0.1", "webpack-subresource-integrity": "1.0.4", - "worker-loader": "1.1.1", - "what-input": "5.0.5" + "what-input": "5.0.5", + "worker-loader": "1.1.1" }, "scripts": { "freezer": "webpack --config=./webpack_config/webpack.freezer.js && node ./dist/freezer.js", "freezer:validate": "npm run freezer -- --validate", "db": "nodemon ./db", - "build": "webpack --config webpack_config/webpack.prod.js", + "build": "webpack --mode=production --config webpack_config/webpack.prod.js", "prebuild": "check-node-version --package", - "build:downloadable": "webpack --config webpack_config/webpack.html.js", + "build:downloadable": "webpack --mode=production --config webpack_config/webpack.html.js", "prebuild:downloadable": "check-node-version --package", - "build:electron": "webpack --config webpack_config/webpack.electron-prod.js && node webpack_config/buildElectron.js", - "build:electron:osx": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=osx node webpack_config/buildElectron.js", - "build:electron:windows": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=windows node webpack_config/buildElectron.js", - "build:electron:linux": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=linux node webpack_config/buildElectron.js", + "build:electron": "webpack --mode=production --config webpack_config/webpack.electron-prod.js && node webpack_config/buildElectron.js", + "build:electron:osx": "webpack --mode=production --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=osx node webpack_config/buildElectron.js", + "build:electron:windows": "webpack --mode=production --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=windows node webpack_config/buildElectron.js", + "build:electron:linux": "webpack --mode=production --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=linux node webpack_config/buildElectron.js", "prebuild:electron": "check-node-version --package", "test:coverage": "jest --config=jest_config/jest.config.json --coverage", "test": "jest --config=jest_config/jest.config.json", diff --git a/webpack_config/devServer.js b/webpack_config/devServer.js index e79ddd88..0868857f 100644 --- a/webpack_config/devServer.js +++ b/webpack_config/devServer.js @@ -45,7 +45,7 @@ const devMiddleWare = require('webpack-dev-middleware')(compiler, { app.use(devMiddleWare); app.use( require('webpack-hot-middleware')(compiler, { - log: console.info + log: false }) ); diff --git a/webpack_config/makeConfig.js b/webpack_config/makeConfig.js index c011a8e6..9c9ad71a 100644 --- a/webpack_config/makeConfig.js +++ b/webpack_config/makeConfig.js @@ -6,10 +6,9 @@ const threadLoader = require('thread-loader'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); -const AutoDllPlugin = require('autodll-webpack-plugin'); -const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); const ProgressPlugin = require('webpack/lib/ProgressPlugin'); const BabelMinifyPlugin = require('babel-minify-webpack-plugin'); const SriPlugin = require('webpack-subresource-integrity'); @@ -214,10 +213,6 @@ module.exports = function(opts = {}) { comments: false } ), - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - filename: 'vendor.[chunkhash:8].js' - }), new ExtractTextPlugin('[name].[chunkhash:8].css'), new FaviconsWebpackPlugin({ logo: path.resolve(config.path.assets, 'images/favicon.png'), @@ -234,24 +229,14 @@ module.exports = function(opts = {}) { ); } else { plugins.push( - new AutoDllPlugin({ - inject: true, // will inject the DLL bundles to index.html - filename: '[name]_[hash].js', - debug: true, - context: path.join(config.path.root), - entry: { - vendor: [...config.vendorModules, 'babel-polyfill', 'bootstrap-sass', 'font-awesome'] - } - }), new HardSourceWebpackPlugin({ environmentHash: { root: process.cwd(), - directories: ['webpack_config'], + directories: ['common/webpack_config'], files: ['package.json'] } }), new webpack.HotModuleReplacementPlugin(), - new webpack.NoEmitOnErrorsPlugin(), new FriendlyErrorsPlugin() ); } @@ -276,6 +261,16 @@ module.exports = function(opts = {}) { ); } + // ==================== + // === Optimization === + // ==================== + const optimization = {}; + if (options.isProduction) { + optimization.splitChunks = { + chunks: 'all' + }; + } + // ==================== // ====== DevTool ===== // ==================== @@ -310,6 +305,8 @@ module.exports = function(opts = {}) { performance: { hints: options.isProduction ? 'warning' : false }, + optimization, + mode: options.isProduction ? 'production' : 'development', stats: { // Reduce build output children: false, diff --git a/webpack_config/plugins/serverLog.js b/webpack_config/plugins/serverLog.js index 767ee564..2d67fbd6 100644 --- a/webpack_config/plugins/serverLog.js +++ b/webpack_config/plugins/serverLog.js @@ -1,20 +1,19 @@ 'use strict'; const chalk = require('chalk'); -// this plugin if for loggin url after each time the compilation is done. -module.exports = class LogPlugin { - constructor(port) { - this.port = port; - } - - apply(compiler) { - const protocol = process.env.HTTPS ? 'https' : 'http'; - compiler.plugin('done', () => { - console.log( - `> App is running at ${chalk.yellow( - `${protocol}://localhost:${this.port}` - )}\n` - ); - }); - } +const LogPlugin = function(port) { + this.port = port; + this.protocol = process.env.HTTPS ? 'https' : 'http'; }; + +LogPlugin.prototype.apply = function(compiler) { + compiler.plugin('done', (compiler, done) => { + console.log( + `> App is running at ${chalk.yellow( + `${this.protocol}://localhost:${this.port}` + )}\n` + ); + }); +}; + +module.exports = LogPlugin;