• 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的代码修改过程中最为复杂的一部分，

    optimization是webpack的核心，处理如何压缩代码，如何提取公共代码，如何混淆等待等.

    简易配置方法如下

    // 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

    简单使用方法