Webpack

Webpack 是一个模块打包工具。

基础配置

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  }
}

常用插件

• html-webpack-plugin: 生成 HTML 文件
• mini-css-extract-plugin: 提取 CSS
• clean-webpack-plugin: 清理输出目录

优化策略

1. 代码分割
2. Tree Shaking
3. 压缩优化
4. 缓存策略