• HZERO前端工程架构现已采用全新的Webpack 4.x作为项目工程的开发和构建工具.

    Webpack 4.x加入了更多新的特性,同时改进了原来的配置方案,官方的说法是全新版本采用社区的最佳实践方案.

    更多关于webpack,请参考https://webpack.js.org/

    HZERO前端工程架构的webpack配置遵循约定优于配置,以下是webpack 4.x的部分默认值(约定):

    核心插件

    Webpack官方去除和改进一些插件,同时还对相关插件配置做了调整

    terser-webpack-plugin

    官方现采用terser-webpack-plugin替换替换原来的uglifyjs-webpack-plugin等相关插件

    Switch from uglify-es to terser as default minimizer 官方解释如下

    For webpack to use the new terser-webpack-plugin instead of uglifyjs-webpack-plugin.

    optimization

    官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,这也应该是从以前的版本升级到webpack 4.x的代码修改过程中最为复杂的一部分,

    optimizationwebpack的核心,处理如何压缩代码,如何提取公共代码,如何混淆等待等.

    简易配置方法如下

    // webpack.config.js
    
    const TerserPlugin = require('terser-webpack-plugin');
    
    module.exports = {
      //...
      optimization: {
        minimizer: [
          new TerserPlugin({
            cache: true,
            parallel: true
          })
        ]
      }
    };
    

    optimization.splitChunks

    SplitChunks是由webpack 4.x内置的SplitChunksPlugin插件提供,可直接在optimization选项中配置,其默认配置如下

    module.exports = {
      //...
      optimization: {
        splitChunks: {
          chunks: 'async', 
          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
            }
          }
        }
      }
    };
    

    关于optimization.splitChunks.cacheGroups

    cacheGroups可以继承/覆盖splitChunks中所有的参数值,除此之外还额外提供了三个配置: test/priority/reuseExistingChunk

    webpack dll

    构建前端项目的时候, 往往希望第三方库(vendors)和自己写的代码可以分开打包.因为第三方库往往不需要经常打包更新

    HZERO前端工程架构现已采用webpack dll模式

    关于webpack dll请参考: https://webpack.js.org/plugins/dll-plugin/#usage

    简单使用方法