webpack 官方文档
英文原文配置更新

核心概念

1. entry 规定入口文件，一个或者多个
2. output 规定输出文件的位置及命名规则 只有一个出口
   path
   filename
3. loader 各个类型模块的转换工具 （对应配置module.rules）webpack只理解js模块，需要loader支持

{
  test: /\.css/ // 匹配目标文件
  use: 'css-loader' // 选择loader 需要单独安装
}
1
2
3
4

4. plugin 用于执行范围更广的任务（对应配置 plugins） 涉及范围包括 打包优化和压缩、重新定义环境中的变量
   内置插件

   plugins: [
     new UglifyJsPlugin()
   ]
   1
   2
   3

5. mode 模式 development 或 production

名词
chunk
bundle

entry

entry: {
  main: './path/to/my/entry/file.js'
}
1
2
3

可简写为字符串形式

loader

module.rules

use: [
  {
    loader: 'css-loader',
    options: {
      modules: true
    }
  }
]
1
2
3
4
5
6
7
8

重要内容

• tree-shaking ( 减少打包后的体积 )
  描述移除 JavaScript 上下文中的未引用代码(dead-code)

• Magic Comments : 魔法注释 webpackChunkName

/* webpackChunkName: vendor*/
1

• webpack-dev-server

路径解析

模块热替换 HMR

• resolve

代码分离
动态导入

import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
})
1
2

bundle 分析工具
vuecli 配置 webpack 打包分析

"analyzer": "set analyzer=true && vue-cli-service build "
1

• optimization
  1. minimizer
  2. runtimeChunk
  3. noEmitOnErrors
  4. splitChunks