打包js资源

前面说webpack内置js的翻译loader，但是这个翻译只有模块化的功能，无法提供代码向低版本编译：

babel-loader

let loaders = [
  ...loaders,
  {
    test: /.(js)$/,
    exclude: /node_modules/,
    use: {
      // 依赖几个包 babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime
      // @babel/core 解析js，@babel/preset-env 是 @babel/core一组插件，babel-loader使得webpack能够使用babel/core的能力
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        // 解析async await函数的时候 需要 regeneratorRuntime 函数
        plugins: [
          [
            '@babel/plugin-transform-runtime'
          ]
        ]
      }
    }
  }
]

Polyfill 向下兼容浏览器

本方案建议查看babel官网

方案	优点	缺点
babel-polyfill	功能全面	体积太大超过200kb，难以抽离
babel-plugin-transform-runtime	只polyfill用到的类或者方法，体积相对较小	不能polyfill原型上的方法，不适合复杂业务
团队维护自己的polyfill	定制化高，体积小	维护成本太高
polyfill service	只返回需要的polyfill，体积最小部分	奇葩浏览器的UA不识别，走优雅降级方案返回全部polyfill

那webpack.config.js怎么写呢：

{
  babel: 'babel-loader',
  options: {
    presets: [
      '@babel/preset-env',
      {
        corejs: 3,
        useBuiltIns: 'usage', // 按需加载
        targets: [
          ....// 配置 browserslist兼容
        ]
      }
    ]
  }
}

Eslint接入

需要 eslint 来检测代码，需要 webpack-eslint-plugin 插件来集成eslint在webpack中使用
生成.eslintrc文件：npx eslint --init，初始化对应的eslint配置

const ESLintPlugin = require('eslint-webpack-plugin');

let plugins = [
  ...plugins, 
  new ESLintPlugin({
    fix: true,
    files: [], // 指定需要检测的文件
    emitError: boolean, // 是否开启警告
    exclude: Array<string> // 排除的文件/目录
  }),
];

TypeScript接入

npm i typescript -D && npx tsc --init
设置tsconfig.js的 rootDir 和 outDir

配置ts-loader（需要先安装ts 和 ts-loader，即先用ts识别翻译语法树再通过 ts-loader 将其集成到webpack里）

// typescript的检查和编译都非常消耗信息，transpileOnly能关闭ts的检查，直接的编译
options: {
  transpileOnly: true,
},

JS压缩

虽然webpack默认在生产环境下是压缩代码的，但是当我们修改webpack.config.js的一些配置会使其失效，比如 optimization

这个时候就得手动配置内置的插件 TerserWebpackPlugin

const optimization = {
  minimize: true, // 开启压缩
  minimizer: [
    new TerserPlugin(),
    new CssMinimizerPlugin(),
  ],
}

总结

本案例代码在 code-example / 11-example

05-打包js资源