webpack4之旅

单独打包第三方库代码

module.exports = {
   optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          // 打包第三方库
          test: /\/node_modules\//,
          name: "vendor",
          chunks: "all",
          minChunks: 1
        }
      }
    }
  }
})

单独打包 css 代码

使用 mini-css-extract-plugin插件，推荐生产环境启用，因为该插件不支持热更新。使用contenthash。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(base, {
    mode: "production",
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]-[contenthash].css',
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
        ]
    }
})

压缩混淆代码

optimize-css-assets-webpack-plugin 压缩css文件。
uglifyjs-webpack-plugin 压缩js文件。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(base, {
    mode: "production",
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true
            }),
            new OptimizeCssAssetsPlugin({})
        ]
    }
})

合并css chunk成一个css文件

module.exports = {
   optimization: {
    splitChunks: {
      cacheGroups: {
        style: {
          name: 'style',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
         }
        }
      }
    }
  }
})

推荐插件

preload-webpack-plugin 预加载chunk
happypack 利用多进程的模式加速编译，使得构建速度更快。
script-ext-html-webpack-plugin 让 js 加载方式支持 async 或 defer等。

tips

const TopicList = getComponent(() => import(/* webpackChunkName: 'Topic' */"./modules/Home/TopicList.jsx"))
// 该方式可以给chunk起名字，方便排查问题。
const TopicList = getComponent(() => import(/*webpackPrefetch:true, webpackChunkName: 'Topic' */"./modules/Home/TopicList.jsx"))
// webpackPrefetch:true 可以指定chunk进行预获取。
// webpackPreload:true 可以指定chunk进行预加载。

demo

完整配置可见demo
my-react
my-cnode