webpack 笔记

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

配置文件
webpack.config.js
命令
webpack-cli

核心概念

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

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

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

   plugins: [
     new UglifyJsPlugin()
   ]
   

5. mode 模式 development 或 production

名词
chunk
bundle

entry

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

可简写为字符串形式

loader

module.rules

use: [
  {
    loader: 'css-loader',
    options: {
      modules: true
    }
  }
]

重要内容

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

• Magic Comments : 魔法注释 webpackChunkName

/* webpackChunkName: vendor*/

• webpack-dev-server

路径解析

模块热替换 HMR

• resolve

代码分离
动态导入

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

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

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

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