upgrade:4.1.0

hyy1115 · hyy1115 · commit de29c48c457e · 2018-08-23T15:53:46.000+08:00
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -5,8 +5,6 @@ const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getClientEnvironment = require('./env');
@@ -17,7 +15,7 @@ const publicUrl = '';
 const env = getClientEnvironment(publicUrl);
 
 module.exports = {
-  devtool: 'cheap-module-source-map',
+  mode: 'development',
   entry: [
     require.resolve('./polyfills'),
     require.resolve('react-dev-utils/webpackHotDevClient'),
@@ -135,7 +133,6 @@ module.exports = {
     ],
   },
   plugins: [
-    new InterpolateHtmlPlugin(env.raw),
     new HtmlWebpackPlugin({
       inject: true,
         hash: true,
@@ -145,7 +142,6 @@ module.exports = {
     new webpack.DefinePlugin(env.stringified),
     new webpack.HotModuleReplacementPlugin(),
     new CaseSensitivePathsPlugin(),
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
   ],
   node: {
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
@@ -4,35 +4,25 @@ const autoprefixer = require('autoprefixer');
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const ManifestPlugin = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
 const publicPath = paths.servedPath;
-const shouldUseRelativeAssetPaths = publicPath === './';
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 const publicUrl = publicPath.slice(0, -1);
 const env = getClientEnvironment(publicUrl);
 
 if (env.stringified['process.env'].NODE_ENV !== '"production"') {
   throw new Error('Production builds must have NODE_ENV=production.');
 }
 
-const cssFilename = 'static/css/[name].[contenthash:8].css';
-
-const extractTextPluginOptions = shouldUseRelativeAssetPaths
-  ?
-    { publicPath: Array(cssFilename.split('/').length).join('../') }
-  : {};
-
 module.exports = {
+  mode: 'production',
   bail: true,
-  devtool: shouldUseSourceMap ? 'source-map' : false,
   entry: [require.resolve('./polyfills'), paths.appIndexJs],
   output: {
     path: paths.appBuild,
@@ -100,55 +90,43 @@ module.exports = {
           },
           {
             test: /\.(less|css)$/,
-            loader: ExtractTextPlugin.extract(
-              Object.assign(
-                {
-                  fallback: {
-                    loader: require.resolve('style-loader'),
-                    options: {
-                      hmr: false,
-                    },
-                  },
-                  use: [
-                    {
-                      loader: require.resolve('css-loader'),
-                      options: {
-                        importLoaders: 1,
-                        minimize: true,
-                        sourceMap: shouldUseSourceMap,
-                          modules: true,
-                          localIdentName: '[local]--[hash:base64:5]'
-                      },
-                    },
-                    {
-                      loader: require.resolve('postcss-loader'),
-                      options: {
-                        ident: 'postcss',
-                        plugins: () => [
-                          require('postcss-flexbugs-fixes'),
-                          autoprefixer({
-                            browsers: [
-                              '>1%',
-                              'last 4 versions',
-                              'Firefox ESR',
-                              'not ie < 9', // React doesn't support IE8 anyway
-                            ],
-                            flexbox: 'no-2009',
-                          }),
-                            require('postcss-pxtorem')({
-                                rootValue: 75,
-                                propList: ['*']
-                            }),
-                            require('precss')
-                        ],
-                      },
-                    },
-                      require.resolve('less-loader')
+            use: [
+              MiniCssExtractPlugin.loader,
+              {
+                loader: require.resolve ('css-loader'),
+                options: {
+                  importLoaders: 1,
+                  minimize: true,
+                  sourceMap: true,
+                  modules: true,
+                  localIdentName: '[local]--[hash:base64:5]'
+                }
+              },
+              {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                  ident: 'postcss',
+                  plugins: () => [
+                    require('postcss-flexbugs-fixes'),
+                    autoprefixer({
+                      browsers: [
+                        '>1%',
+                        'last 4 versions',
+                        'Firefox ESR',
+                        'not ie < 9', // React doesn't support IE8 anyway
+                      ],
+                      flexbox: 'no-2009',
+                    }),
+                    require('postcss-pxtorem')({
+                      rootValue: 75,
+                      propList: ['*']
+                    }),
+                    require('precss')
                   ],
                 },
-                extractTextPluginOptions
-              )
-            ),
+              },
+              require.resolve('less-loader')
+            ]
           },
           {
             loader: require.resolve('file-loader'),
@@ -161,11 +139,33 @@ module.exports = {
       },
     ],
   },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      minSize: 30000,
+      maxSize: 0,
+      minChunks: 1,
+      maxAsyncRequests: 5,
+      maxInitialRequests: 3,
+      automaticNameDelimiter: '~',
+      name: true,
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10
+        },
+        default: {
+          minChunks: 2,
+          priority: -20,
+          reuseExistingChunk: true
+        }
+      }
+    }
+  },
   plugins: [
-    new InterpolateHtmlPlugin(env.raw),
     new HtmlWebpackPlugin({
       inject: true,
-        hash: true,
+      hash: true,
       template: paths.appHtml,
       minify: {
         removeComments: true,
@@ -181,22 +181,8 @@ module.exports = {
       },
     }),
     new webpack.DefinePlugin(env.stringified),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false,
-        comparisons: false,
-      },
-      mangle: {
-        safari10: true,
-      },
-      output: {
-        comments: false,
-        ascii_only: true,
-      },
-      sourceMap: shouldUseSourceMap,
-    }),
-    new ExtractTextPlugin({
-      filename: cssFilename,
+    new MiniCssExtractPlugin({
+      filename: 'static/css/[contenthash].css',
     }),
     new ManifestPlugin({
       fileName: 'asset-manifest.json',
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-redux-webpack",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
@@ -26,21 +26,21 @@
     "dotenv-expand": "4.2.0",
     "eslint": "4.10.0",
     "eslint-config-react-app": "^2.1.0",
-    "eslint-loader": "1.9.0",
+    "eslint-loader": "^2.1.0",
     "eslint-plugin-flowtype": "2.39.1",
     "eslint-plugin-import": "2.8.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-react": "7.4.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "1.1.5",
+    "file-loader": "2.0.0",
     "fs-extra": "3.0.1",
     "history": "^4.7.2",
-    "html-webpack-plugin": "2.29.0",
+    "html-webpack-plugin": "^4.0.0-alpha",
     "http-proxy-middleware": "^0.18.0",
     "immutable": "^3.8.2",
     "jest": "20.0.4",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.4.2",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.8",
@@ -65,11 +65,11 @@
     "resolve": "1.6.0",
     "serve": "^6.5.6",
     "style-loader": "0.19.0",
-    "sw-precache-webpack-plugin": "0.11.4",
+    "sw-precache-webpack-plugin": "0.11.5",
     "url-loader": "0.6.2",
-    "webpack": "3.8.1",
-    "webpack-dev-server": "2.9.4",
-    "webpack-manifest-plugin": "1.3.2",
+    "webpack": "4.17.1",
+    "webpack-dev-server": "3.1.5",
+    "webpack-manifest-plugin": "2.0.0",
     "whatwg-fetch": "2.0.3"
   },
   "jest": {
diff --git a/public/index.html b/public/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="shortcut icon" href="/favicon.ico">
     <title>react-redux-webpack</title>
   </head>
   <body>
diff --git a/yarn.lock b/yarn.lock
