feat(build-config): update webpack to v4

fix configs, temporarily remove extract-text-webpack-plugin
xing · Jan 26, 2018 · eec1750 · eec1750
1 parent 87f0c15
commit eec1750
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 41 deletions.
diff --git a/packages/build-config/configs/build.js b/packages/build-config/configs/build.js
@@ -3,7 +3,6 @@
 var path = require('path');
 
 var webpack = require('webpack');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var UglifyPlugin = require('uglifyjs-webpack-plugin');
 var StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
 var WriteManifestPlugin = require('../plugins/write-manifest');
@@ -14,48 +13,48 @@ var hopsConfig = require('hops-config');
 var getAssetPath = path.join.bind(path, hopsConfig.assetPath);
 
 module.exports = {
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   entry: require.resolve('../shims/build'),
   output: {
     path: hopsConfig.buildDir,
     publicPath: '/',
     filename: getAssetPath('[name]-[chunkhash:16].js'),
-    chunkFilename: getAssetPath('chunk-[id]-[chunkhash:16].js'),
+    chunkFilename: getAssetPath('[name]-[chunkhash:16].js'),
   },
   context: hopsConfig.appDir,
   resolve: require('../sections/resolve')('build'),
   module: {
     rules: require('../sections/module-rules')('build'),
   },
   devtool: 'source-map',
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: function(module) {
+            if (module.resource) {
+              if (
+                module.resource.indexOf('hops-config') > -1 ||
+                module.resource.indexOf('.css') === module.resource.length - 4
+              ) {
+                return false;
+              }
+            }
+            return (
+              module.context && module.context.indexOf('node_modules') > -1
+            );
+          },
+          name: 'vendor',
+          chunks: 'all',
+        },
+      },
+    },
+  },
   plugins: [
     new WriteFilePlugin(/^manifest\.js(\.map)?$/),
     new WriteManifestPlugin(),
     new StatsWriterPlugin({ fields: null }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function(module) {
-        if (module.resource) {
-          if (
-            module.resource.indexOf('hops-config') > -1 ||
-            module.resource.indexOf('.css') === module.resource.length - 4
-          ) {
-            return false;
-          }
-        }
-        return module.context && module.context.indexOf('node_modules') > -1;
-      },
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      filename: 'manifest.js',
-      minChunks: Infinity,
-    }),
     new webpack.HashedModuleIdsPlugin(),
-    new ExtractTextPlugin({
-      filename: getAssetPath('[name]-[contenthash:16].css'),
-      allChunks: true,
-      ignoreOrder: true,
-    }),
     new webpack.EnvironmentPlugin(
       Object.assign(
         {

diff --git a/packages/build-config/configs/develop.js b/packages/build-config/configs/develop.js
@@ -11,6 +11,7 @@ var hopsConfig = require('hops-config');
 var getAssetPath = path.join.bind(path, hopsConfig.assetPath);
 
 module.exports = {
+  mode: 'development',
   entry: [
     require.resolve('webpack-hot-middleware/client'),
     require.resolve('../shims/develop'),

diff --git a/packages/build-config/configs/node.js b/packages/build-config/configs/node.js
@@ -37,6 +37,7 @@ var modulesDir = findNodeModules(process.cwd());
 
 module.exports = {
   target: 'node',
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   entry: require.resolve('../shims/node'),
   output: {
     path: hopsConfig.cacheDir,

diff --git a/packages/build-config/package.json b/packages/build-config/package.json
@@ -32,7 +32,8 @@
     "babel-preset-react": "^6.24.1",
     "caniuse-lite": "^1.0.30000789",
     "css-loader": "^0.28.8",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "extract-text-webpack-plugin":
+      "webpack-contrib/extract-text-webpack-plugin#next",
     "file-loader": "^1.1.6",
     "find-up": "^2.1.0",
     "hops-config": "10.0.0-rc.0",
@@ -48,7 +49,7 @@
     "style-loader": "^0.19.1",
     "uglifyjs-webpack-plugin": "^1.1.6",
     "url-loader": "^0.6.2",
-    "webpack": "^3.6.0",
+    "webpack": "^4.0.0-beta.0",
     "webpack-node-externals": "^1.6.0",
     "webpack-stats-plugin": "^0.1.5"
   }

diff --git a/packages/build-config/sections/module-rules/postcss.js b/packages/build-config/sections/module-rules/postcss.js
@@ -25,19 +25,17 @@ var postcssLoaderOptions = {
 
 exports.build = {
   test: /\.css$/,
-  use: ExtractTextPlugin.extract({
-    fallback: 'style-loader',
-    use: [
-      {
-        loader: require.resolve('css-loader'),
-        options: cssLoaderOptions,
-      },
-      {
-        loader: require.resolve('postcss-loader'),
-        options: postcssLoaderOptions,
-      },
-    ],
-  }),
+  use: [
+    'style-loader',
+    {
+      loader: require.resolve('css-loader'),
+      options: cssLoaderOptions,
+    },
+    {
+      loader: require.resolve('postcss-loader'),
+      options: postcssLoaderOptions,
+    },
+  ],
 };
 
 exports.develop = {