{
    test: /\.js$/,
    use: {
        loader: 'bable-loader',
        options: {
            preset: ['@babel/preset-env']
        }
    }
}

preset: [
  [
    "@babel/preset-env",
    {
      /**
       * false: 默认值，无视浏览器兼容配置，引入所有 polyfill
       * entry: 根据配置的浏览器兼容，引入浏览器不兼容的 polyfill
       * usage: 根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加
       */
      useBuiltIns: "false | entry | usage",
    },
  ],
];

plugins: [
  ["@babel/plugin-proposal-decorators", { legacy: true }],
  ["@babel/plugin-proposal-class-properties", { loose: true }],
  ["@babel/plugin-proposal-private-methods", { loose: true }],
  ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
];

// webpack.config.js
const nodeExternals = require("webpack-node-externals");
module.exports = {
  entry: "./src/index",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "main.js",
    // 1. 声明 webpack 的构建目标为 library
    library: {
      name: "npm-library-name",
      type: "umd",
    },
  },
  // 2. 引入第三方包时让 webpack 不要一起打包
  externals: [nodeExternals()],
  // 3. 生产 Sourcemap
  devtool: "source-map",
};

// package.json
{
  // 4.1 声明 npm 包名
  "name": "npm-library-name",
  // 4.2 指定 ES Module 模式引入时的入口文件
  "module": "src/index.js",
  // 4.3 指定 ES 其它 模式引入时的入口文件
  "main": "dist/main.js",
  "scripts": {
    // 5. 在发布前自动执行编译命令
    "prepublishOnly": "webpack --mode=production"
  }
}

// webpack.config.js
module.exports = {
  // ...
  // 添加 profile = true 配置
  profile: true,
};

// yarn add -D speed-measure-webpack-plugin
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const config = {};
module.exports = smp.wrap(config);

// yarn add -D unused-webpack-plugin
const UnusedWebpackPlugin = require("unused-webpack-plugin");
module.exports = {
  plugins: [
    new UnusedWebpackPlugin({
      directories: [path.join(__dirname, "src")], // 指定需要分析的文件目录
      root: path.join(__dirname, "../"), // 用于指定根路径，与输出有关
    }),
  ],
};

// 借助 `cache-loader`
// 1. 将 Loader 处理结果保存到硬盘，下次运行时若文件内容没有发生变化则直接返回缓存结果
// 2. 只缓存了 Loader 执行结果，缓存范围与精度不如 Webpack5 内置的缓存功能，所以性能效果相对较低（性能提升在 60% ~ 80% 之间）
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["cache-loader", "babel-loader", "eslint-loader"],
      },
    ],
  },
  //...
};
// 借助 `hard-source-webpack-plugin`
// 1. 不仅仅缓存了 Loader 运行结果，还保存了 Webpack 构建过程中许多中间数据
// 2. 底层逻辑与 Webpack5 的持久化缓存很相似，但优化效果稍微差一些（性能提升在 62% ~ 88% 之间）
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
module.exports = {
  // ...
  plugins: [new HardSourceWebpackPlugin()],
};

module.exports = {
  cache: {
    type: "filesystem", // 缓存类型，支持 'memory' | 'filesystem'，需要设置为 filesystem 才能开启持久缓存
    cacheDirectory: '', // 缓存文件路径，默认为 node_modules/.cache/webpack
    buildDependencies: { // 额外的依赖文件，当这些文件内容发生变化时，缓存会完全失效而执行完整的编译构建，通常可设置为各种配置文件
      config: [
        path.join(__dirname, 'webpack.dll_config.js'),
        path.join(__dirname, '.babelrc')
      ],
    }
    maxAge: '', // 缓存失效时间，默认值为 5184000000
  },
};

// yarn add -D happypack
rules: [
  {
    test: /\.js$/,
    // 1. 使用 happypack/loader 代替原本的 Loader 序列
    use: 'happypack/loader?id=js',
  }
],
// 2. 使用 HappyPack 插件注入代理执行 Loader 序列的逻辑
plugins: [
  new HappyPack({
    id: 'js',
    loaders: ['babel-loader']
  })
]

// yarn add -D thread-loader
rules: [
  {
    test: /\.js$/,
    use: ["thread-loader", "babel-loader"],
  }
],

entry: {
  entry1: { import: "./entry1", runtime: "solid-runtime" },
  entry2: { import: ".//entry2", runtime: "solid-runtime" },
},
splitChunks: {
  cacheGroups: {
    lodash: {
      test: /lodash/,
      name: "lodash",
      minChunks: 1,
    },
  }
}


// entry1.js
import common from "./common";
import("./async-module");
import lodash from 'lodash'
// entry2.js
import common from './common'

// 1. Initial Chunk
{chunk[entry1]：module[entry1.js], module[common.js]}
{chunk[entry2]：module[entry2.js], module[common.js]}
{chunk[lodash]: module[node_modules/lodash/lodash.js]}

// 2. Async Chunk
{chunk[async-module]: module[async-module.js]}

// 3. Runtime Chunk
{chunk[solid-runtime]: ……}

optimization: {
  chunks: 'all', // 'all' | 'async' | 'initial'
  minChunks: 2,  //  Module 被使用频率, 它并不直接等价于被 import 的次数，而是取决于上游调用者是否被视作 Initial Chunk 或 Async Chunk 处理
  maxInitialRequests: 5, // Initial Chunk 最大并行请求数
  axAsyncRequests: 3,  // Async Chunk 最大并行请求数
  cacheGroups: {
    // 将 node_modules 模块打包成单独文件
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      minChunks: 1,
    },
  }
}

module.exports = {
  mode: "production",
  optimization: {
    usedExports: true,
  },
};

// 编写插件的重点：
// 1. Hook 调用时机
// 2. Hook 回调传递的上下文参数
class MyWebpackPlugin {
  constructor(opts) {}
  apply(compiler) {
    compiler.hooks.emit.tapAsync(this.name, (compilation, cb) => {});
  }
}