Webpack基础（一）

模块打包工具，可压缩，优化代码格式
支持大部分模块规范：COMMONJS、AMD(require.js)、CMD(sea.js)、ES6模块

核心

entry:一个或多个入口，一般是js文件，通过递归找到依赖文件，多入口文件的entry通过键值对的形式输入

output:出口文件及位置

loader:webpack本身只能解析js/json文件，loader使webpack可以解析打包其他格式的文件，在module.rules中配置，test指定匹配规则，use指定使用的loader

常见的loader
css-loader: 支持.css文件的加载和解析，转换成commonjs对象
style-loader: 将样式通过style标签插入到head中
url-loader: 内部使用了file-loader，可以自动将较小文件打包成base64
file-loader: 图片、字体的打包
raw-loader: 将文件以字符串的形式导入（base64）
babel-loader: 转换es5以上版本的新特性语法
vue-loader
postcss-loader
image-loader
sass-loader/less-loader: 将sass/less文件转换成css文件
sass-resources-loader: 提取sass中的全局变量
ts-loader: 将typeScript转换成js
thread-loader: 多进程打包css和js

plugin:插件，扩展功能，资源管理，环境变量注入，作用于整个构建过程，放到plugins数组中

常见的plugin
define-plugin:定义环境变量
commons-chunk-plugin:提取公共代码
clean-webpack-plugin:清理构建目录
extract-text-webpack-plugin:将css从bundle文件里提取成一个独立的css文件
mini-css-extract-plugin:将css提取成一个单独的css文件，支持webpack4，使用link标签的方式插入到HTML中
copy-webpack-plugin:将文件或文件夹拷贝到构建的输出目录
html-webpack-plugin:创建html文件去承载输出的bundle
uglify-js-webpack-plugin:压缩混淆js代码
zip-webpack-plugin:将打包的资源生成zip文件
web-webpack-plugin:为单页应用输出html，比前者好用
hot-module-replacement-plugin:热更新，webpack自带，在devServer中配置hot:true会自动引入这个插件，具体作用：将HMR runtime注入到webpack打包的bundle.js中，使其可以与HMR server建立websocket通信，从而实现热更新

mode（webpack4新增字段）
可选值

1. development: 设置process.env.NODE_ENV: development,开启NamedChunksPlugin和NamedModulesPlugin
2. production: 设置process.env.NODE_ENV: production,开启FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin, TerserPlugin
3. none: 不开启任何优化项

文件指纹

打包后输出文件名的后缀，用于版本管理，发布时仅需要发布更改过的内容，没有更改过的使用缓存
生成：
hash: 只要项目有改动，hash就会变
contentHash：根据文件内容定义，文件内容变动，他就会变,常见的场景：一个js文件引用了css文件，css文件一般使用contentHash
chunkHash:不同的entry会有不同的chunkHash,chunk内容改变，他就会变

占位符名称：
[ext]: 资源后缀名
[name]: 文件名
[path]: 文件的相对路径
[folder]: 文件夹
[contenthash]: hash值,md5加密，长度值为32位，[chunkhash:8]表示取前8位
[hash]: hash值

js的文件指纹设置：
output.filename: '[name]_[chunkhash:8].js'
css的文件指纹设置：
使用MiniCssExtraPlugin提成单独的文件再设置，与style-loader功能互斥，不能同时使用
new MiniCssExtractPlugin({
filename: [filename]_[contenthash:8].css
})
图片的文件指纹设置：在file-loader中设置
loader: "file-loader",
options: {
name: 'img/[name][hash:8].[ext]'
}

名词解释：
bundle:打包的文件
chunk:代码块，由多个模块组成
module：模块，一个文件