update webpack to 4.x (#425)

* update webpack to 4.x

Author: tangjinzhou

antd-tools/getBabelCommonConfig.js

@@ -3,6 +3,7 @@
 module.exports = function(modules) {
   const plugins = [
     require.resolve('babel-plugin-transform-vue-jsx'),
+    require.resolve('babel-plugin-inline-import-data-uri'),
     require.resolve('babel-plugin-transform-es3-member-expression-literals'),
     require.resolve('babel-plugin-transform-es3-property-literals'),
     require.resolve('babel-plugin-transform-object-assign'),

antd-tools/getWebpackConfig.js

@@ -1,28 +1,43 @@
 const path = require('path');
 const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const WebpackBar = require('webpackbar');
+const webpackMerge = require('webpack-merge');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const deepAssign = require('deep-assign');
-const chalk = require('chalk');
 const postcssConfig = require('./postcssConfig');
+const CleanUpStatsPlugin = require('./utils/CleanUpStatsPlugin');
+
 const distFileBaseName = 'antd';
-module.exports = function(modules) {
+
+const svgRegex = /\.svg(\?v=\d+\.\d+\.\d+)?$/;
+const svgOptions = {
+  limit: 10000,
+  minetype: 'image/svg+xml',
+};
+
+const imageOptions = {
+  limit: 10000,
+};
+
+function getWebpackConfig(modules) {
   const pkg = require(path.join(process.cwd(), 'package.json'));
   const babelConfig = require('./getBabelCommonConfig')(modules || false);
 
   const pluginImportOptions = [
     {
       style: true,
-      libraryName: 'antd',
+      libraryName: distFileBaseName,
       libraryDirectory: 'components',
     },
   ];
-
-  // if (distFileBaseName !== 'antd') {   pluginImportOptions.push({     style:
-  // 'css',     libraryDirectory: 'components',     libraryName: 'antd',   }) }
-
   babelConfig.plugins.push([require.resolve('babel-plugin-import'), pluginImportOptions]);
 
+  if (modules === false) {
+    babelConfig.plugins.push(require.resolve('./replaceLib'));
+  }
+
   const config = {
     devtool: 'source-map',
 
@@ -86,74 +101,75 @@ module.exports = function(modules) {
         },
         {
           test: /\.css$/,
-          use: ExtractTextPlugin.extract({
-            use: [
-              {
-                loader: 'css-loader',
-                options: {
-                  sourceMap: true,
-                },
-              },
-              {
-                loader: 'postcss-loader',
-                options: Object.assign({}, postcssConfig, { sourceMap: true }),
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true,
               },
-            ],
-          }),
+            },
+            {
+              loader: 'postcss-loader',
+              options: Object.assign({}, postcssConfig, { sourceMap: true }),
+            },
+          ],
         },
         {
           test: /\.less$/,
-          use: ExtractTextPlugin.extract({
-            use: [
-              {
-                loader: 'css-loader',
-                options: {
-                  sourceMap: true,
-                },
-              },
-              {
-                loader: 'postcss-loader',
-                options: Object.assign({}, postcssConfig, { sourceMap: true }),
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true,
               },
-              {
-                loader: 'less-loader',
-                options: {
-                  sourceMap: true,
-                },
+            },
+            {
+              loader: 'postcss-loader',
+              options: Object.assign({}, postcssConfig, { sourceMap: true }),
+            },
+            {
+              loader: 'less-loader',
+              options: {
+                sourceMap: true,
+                javascriptEnabled: true,
               },
-            ],
-          }),
+            },
+          ],
+        },
+        // Images
+        {
+          test: svgRegex,
+          loader: 'url-loader',
+          options: svgOptions,
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i,
+          loader: 'url-loader',
+          options: imageOptions,
         },
       ],
     },
 
     plugins: [
-      new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }),
       new CaseSensitivePathsPlugin(),
       new webpack.BannerPlugin(`
-${distFileBaseName} v${pkg.version}
+${pkg.name} v${pkg.version}
 
 Copyright 2017-present, ant-design-vue.
 All rights reserved.
       `),
-      new webpack.ProgressPlugin((percentage, msg, addInfo) => {
-        const stream = process.stderr;
-        if (stream.isTTY && percentage < 0.71) {
-          stream.cursorTo(0);
-          stream.write(`📦  ${chalk.magenta(msg)} (${chalk.magenta(addInfo)})`);
-          stream.clearLine(1);
-        } else if (percentage === 1) {
-          console.log(chalk.green('\nwebpack: bundle build is now finished.'));
-        }
+      new WebpackBar({
+        name: '🚚  Ant Design Vue Tools',
+        color: '#2f54eb',
       }),
+      new CleanUpStatsPlugin(),
     ],
   };
 
   if (process.env.RUN_ENV === 'PRODUCTION') {
     const entry = ['./index'];
-    config.entry = {
-      [`${distFileBaseName}.min`]: entry,
-    };
     config.externals = {
       vue: {
         root: 'Vue',
@@ -164,38 +180,61 @@ All rights reserved.
     };
     config.output.library = distFileBaseName;
     config.output.libraryTarget = 'umd';
-
-    const uncompressedConfig = deepAssign({}, config);
-
-    config.plugins = config.plugins.concat([
-      new webpack.optimize.UglifyJsPlugin({
-        sourceMap: true,
-        output: {
-          ascii_only: true,
-        },
-        compress: {
-          warnings: false,
-        },
-      }),
-      new webpack.optimize.ModuleConcatenationPlugin(),
-      new webpack.LoaderOptionsPlugin({ minimize: true }),
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
-      }),
-    ]);
-
-    uncompressedConfig.entry = {
-      [distFileBaseName]: entry,
+    config.optimization = {
+      minimizer: [
+        new UglifyJsPlugin({
+          cache: true,
+          parallel: true,
+          sourceMap: true,
+          uglifyOptions: {
+            warnings: false,
+          },
+        }),
+      ],
     };
 
-    uncompressedConfig.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify('development'),
-      }),
-    );
+    // Development
+    const uncompressedConfig = webpackMerge({}, config, {
+      entry: {
+        [distFileBaseName]: entry,
+      },
+      mode: 'development',
+      plugins: [
+        new MiniCssExtractPlugin({
+          filename: '[name].css',
+        }),
+      ],
+    });
 
-    return [config, uncompressedConfig];
+    // Production
+    const prodConfig = webpackMerge({}, config, {
+      entry: {
+        [`${distFileBaseName}.min`]: entry,
+      },
+      mode: 'production',
+      plugins: [
+        new webpack.optimize.ModuleConcatenationPlugin(),
+        new webpack.LoaderOptionsPlugin({
+          minimize: true,
+        }),
+        new MiniCssExtractPlugin({
+          filename: '[name].css',
+        }),
+      ],
+      optimization: {
+        minimizer: [new OptimizeCSSAssetsPlugin({})],
+      },
+    });
+
+    return [prodConfig, uncompressedConfig];
   }
 
   return config;
-};
+}
+
+getWebpackConfig.webpack = webpack;
+getWebpackConfig.svgRegex = svgRegex;
+getWebpackConfig.svgOptions = svgOptions;
+getWebpackConfig.imageOptions = imageOptions;
+
+module.exports = getWebpackConfig;

antd-tools/transformLess.js

@@ -17,6 +17,7 @@ function transformLess(lessFile, config = {}) {
     paths: [path.dirname(resolvedLessFile)],
     filename: resolvedLessFile,
     plugins: [new NpmImportPlugin({ prefix: '~' })],
+    javascriptEnabled: true,
   };
   return less
     .render(data, lessOpts)

antd-tools/utils/CleanUpStatsPlugin.js

@@ -0,0 +1,38 @@
+// We should use `stats` props of webpack. But it not work in v4.
+class CleanUpStatsPlugin {
+  constructor(option) {
+    this.option = {
+      MiniCSSExtractPlugin: true,
+      tsLoader: true,
+      ...option,
+    };
+  }
+
+  shouldPickStatChild(child) {
+    const { MiniCSSExtractPlugin } = this.option;
+    if (MiniCSSExtractPlugin && child.name.includes('mini-css-extract-plugin')) return false;
+    return true;
+  }
+
+  shouldPickWarning(message) {
+    const { tsLoader } = this.option;
+    if (tsLoader && /export .* was not found in .*/.test(message)) {
+      return false;
+    }
+    return true;
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap('CleanUpStatsPlugin', stats => {
+      const { children, warnings } = stats.compilation;
+      if (Array.isArray(children)) {
+        stats.compilation.children = children.filter(child => this.shouldPickStatChild(child));
+      }
+      if (Array.isArray(warnings)) {
+        stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
+      }
+    });
+  }
+}
+
+module.exports = CleanUpStatsPlugin;