From e9b322d0a6bebe7d13a53a216482ecc364f18806 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Sat, 14 Jul 2018 10:56:41 +0900 Subject: Upgrade webpack to version v4.x (#6655) --- config/webpack/development.js | 2 ++ config/webpack/loaders/sass.js | 29 +++++++++++++++++----------- config/webpack/production.js | 35 +++++++++++++++++++++------------ config/webpack/shared.js | 44 +++++++++++++++++++++++++----------------- config/webpack/test.js | 4 +++- 5 files changed, 72 insertions(+), 42 deletions(-) (limited to 'config/webpack') diff --git a/config/webpack/development.js b/config/webpack/development.js index 12670f5cd..d54d919ec 100644 --- a/config/webpack/development.js +++ b/config/webpack/development.js @@ -16,6 +16,8 @@ if (process.env.VAGRANT) { } module.exports = merge(sharedConfig, { + mode: 'development', + devtool: 'cheap-module-eval-source-map', stats: { diff --git a/config/webpack/loaders/sass.js b/config/webpack/loaders/sass.js index 88d94c684..bad09ceb4 100644 --- a/config/webpack/loaders/sass.js +++ b/config/webpack/loaders/sass.js @@ -1,15 +1,22 @@ -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { env } = require('../configuration.js'); module.exports = { - test: /\.(scss|sass|css)$/i, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: [ - { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } }, - { loader: 'postcss-loader', options: { sourceMap: true } }, - 'resolve-url-loader', - 'sass-loader', - ], - }), + test: /\.s?css$/i, + use: [ + MiniCssExtractPlugin.loader, + { + loader: 'css-loader', + options: { + minimize: env.NODE_ENV === 'production', + }, + }, + { + loader: 'postcss-loader', + options: { + sourceMap: true, + }, + }, + 'sass-loader', + ], }; diff --git a/config/webpack/production.js b/config/webpack/production.js index 037a76a59..58c7fa69a 100644 --- a/config/webpack/production.js +++ b/config/webpack/production.js @@ -1,7 +1,7 @@ // Note: You must restart bin/webpack-dev-server for changes to take effect -const webpack = require('webpack'); const merge = require('webpack-merge'); +const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); const sharedConfig = require('./shared.js'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; @@ -36,6 +36,8 @@ if (process.env.S3_ENABLED === 'true') { } module.exports = merge(sharedConfig, { + mode: 'production', + output: { filename: '[name]-[chunkhash].js', chunkFilename: '[name]-[chunkhash].js', @@ -44,19 +46,28 @@ module.exports = merge(sharedConfig, { devtool: 'source-map', // separate sourcemap file, suitable for production stats: 'normal', - plugins: [ - new webpack.optimize.UglifyJsPlugin({ - sourceMap: true, - mangle: true, + optimization: { + minimize: true, + minimizer: [ + new UglifyJsPlugin({ + sourceMap: true, - compress: { - warnings: false, - }, + uglifyOptions: { + mangle: true, - output: { - comments: false, - }, - }), + compress: { + warnings: false, + }, + + output: { + comments: false, + }, + }, + }), + ], + }, + + plugins: [ new CompressionPlugin({ asset: '[path].gz[query]', algorithm: compressionAlgorithm, diff --git a/config/webpack/shared.js b/config/webpack/shared.js index 50fa48175..a1572665c 100644 --- a/config/webpack/shared.js +++ b/config/webpack/shared.js @@ -1,9 +1,9 @@ // Note: You must restart bin/webpack-dev-server for changes to take effect const webpack = require('webpack'); -const { basename, dirname, join, relative, resolve, sep } = require('path'); +const { basename, dirname, join, relative, resolve } = require('path'); const { sync } = require('glob'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const ManifestPlugin = require('webpack-manifest-plugin'); const extname = require('path-complete-extname'); const { env, settings, themes, output, loadersDir } = require('./configuration.js'); @@ -39,6 +39,26 @@ module.exports = { publicPath: output.publicPath, }, + optimization: { + runtimeChunk: { + name: 'common', + }, + splitChunks: { + cacheGroups: { + default: false, + vendors: false, + common: { + name: 'common', + chunks: 'all', + minChunks: 2, + minSize: 0, + test: /^(?!.*[\\\/]node_modules[\\\/]react-intl[\\\/]).+$/, + }, + }, + }, + occurrenceOrder: true, + }, + module: { rules: sync(join(loadersDir, '*.js')).map(loader => require(loader)), }, @@ -52,25 +72,13 @@ module.exports = { resource.request = resource.request.replace(/^history/, 'history/es'); } ), - new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[contenthash].css' : '[name].css'), + new MiniCssExtractPlugin({ + filename: env.NODE_ENV === 'production' ? '[name]-[contenthash].css' : '[name].css', + }), new ManifestPlugin({ publicPath: output.publicPath, writeToFileEmit: true, - }), - new webpack.optimize.CommonsChunkPlugin({ - name: 'common', - minChunks: (module, count) => { - const reactIntlPathRegexp = new RegExp(`node_modules\\${sep}react-intl`); - - if (module.resource && reactIntlPathRegexp.test(module.resource)) { - // skip react-intl because it's useless to put in the common chunk, - // e.g. because "shared" modules between zh-TW and zh-CN will never - // be loaded together - return false; - } - - return count >= 2; - }, + filter: file => !file.isAsset || file.isModuleAsset, }), ], diff --git a/config/webpack/test.js b/config/webpack/test.js index 6b2b073bb..8b56eb92f 100644 --- a/config/webpack/test.js +++ b/config/webpack/test.js @@ -3,4 +3,6 @@ const merge = require('webpack-merge'); const sharedConfig = require('./shared.js'); -module.exports = merge(sharedConfig, {}); +module.exports = merge(sharedConfig, { + mode: 'development', +}); -- cgit