webpack构建配置

自己创建webpack项目时候的配置

1、构建配置抽成npm包的意义

通用性：业务开发者无需关注构建配置、统一团队构建脚本
可维护性：构建配置合理的拆分、写文档
质量：冒烟测试、单元测试、测试覆盖率、持续集成

2、构建配置管理的方案

通过多个配置文件管理不同的构建：webpack –config 参数进行控制
将构建配置设计成一个库，比如：hjs-webpack
抽成一个工具进行管理，比如：create-react-app
将所有的配置放在一个文件，通过–env参数控制分支选择

多个配置文件的情况下可以用多个webpack配置文件

基础配置：webpack.base.js
开发环境：webpack.dev.js
生产环境：webpack.prod.js
SSR环境：webpack.ssr.js

可以通过webpack-merge进行合并配置。

3、持续集成

持续集成的作用：快速发现错误，防止分支大幅偏离主干

核心措施是：代码集成到主干之前，必须通过自动化测试，只要有一个测试用例失败，就不能集成。

接入Travis CI做持续集成

使用github登录https://travis-ci.org
开启项目权限
在项目目录下新增.travis.yml

4、统计信息

stats：构建的统计信息，在package.json中使用stats

"scripts": {
  "build:stats": "webpack --env production --json > stats.json"
}

这种方式会输出一个json文件，名字为stats.json，信息会齐全。

在node中使用webpack,可以把webpack配置传进去，这种方法的粒度比较大，不容易发现问题。

const webpack = require('webpack');
const config = require('./webpack.config.js')('production');

webpack(config, (err, stats) => {
  if(err){
    return console.error(err);
  }

  if(stats.hasErrors()){
    return console.error(stats.toString('errors-only'));
  }

  console.log(stats);
})

5、构建速度分析

使用speed-measure-webpack-plugin 可以看每个loader和插件的执行耗时,可以分析整个打包的总耗时

const SpeendMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeendMeasurePlugin();
module.exports = smp.wrap({
  plugins: [
    
  ]
})

使用smp.wrap()把配置包裹起来。

6、体积分析

分析webpack的文件体积.使用webpack-bundle-analyzer。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

构建完成后会在8888端口展示大小，可以根据展示的内容进行优化模块文件的大小，以及业务组件代码的大小

7、多进程/多实例构建

可选方案：

官方推出的thread-loader：每次webpack解析一个模块，thread-loader会将它及它的依赖分配给worker线程中
HappyPack：每次webpack解析一个模块，HappyPack会将它及它的依赖分配给worker线程中
parallel-webpack

thread-loader的示例代码

module.exports = {
  module: {
    rule: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: 3
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
}

HappyPack的示例代码

const HappyPack = require('happypack');

module.exports = {
  module: {
    rule: [
      {
        test: /.js$/,
        use: [
          'happypack/loader'
        ]
      }
    ]
  },
  plugins: [
    new HappyPack({
      loaders: ['babel-loader?presets[]=es2015']
    })
  ]
}

8、并行压缩

在代码解析完成之后，输出之前我们可以进行代码压缩。使用parallel-uglify-plugin或者uglifyjs-webpack-plugin和terser-webpack-plugin,webpack4默认使用了terser-webpack-plugin

const ParallelUglifyPlugin = require('parallel-uglify-plugin');
module.exports = {
  plugins: [
    new ParallelUglifyPlugin({
      uglifyJS: {
        output: {
          beautify: false,
          comments: false
        },
        compress: {
          warnings: false,
          drop_console: true,
          collapse_vars: true,
          reduce_vars: true
        }
      },
      parallel: true
    })
  ]
}


////////////////////////////////

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {},
      parallel: true
    })
  ]
}


// //////////////////////////////////////////////////////////////////

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: 4
      })
    ]
  }
}

9、构建体积优化

使用动态polyfill，babel-polyfill或者polyfill-service

猫说