模塊打包工具，可壓縮，優(yōu)化代碼格式
支持大部分模塊規(guī)范：COMMONJS、AMD(require.js)、CMD(sea.js)、ES6模塊
核心
entry:一個或多個入口，一般是js文件，通過遞歸找到依賴文件，多入口文件的entry通過鍵值對的形式輸入
output:出口文件及位置
loader:webpack本身只能解析js/json文件，loader使webpack可以解析打包其他格式的文件，在module.rules中配置，test指定匹配規(guī)則，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:插件，擴展功能，資源管理，環(huán)境變量注入，作用于整個構建過程，放到plugins數組中
常見的plugin
define-plugin:定義環(huán)境變量
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:創(chuàng)建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新增字段）
可選值
- development: 設置process.env.NODE_ENV: development,開啟NamedChunksPlugin和NamedModulesPlugin
- production: 設置process.env.NODE_ENV: production,開啟FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin, TerserPlugin
- none: 不開啟任何優(yōu)化項
文件指紋
打包后輸出文件名的后綴，用于版本管理，發(fā)布時僅需要發(fā)布更改過的內容，沒有更改過的使用緩存
生成：
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：模塊，一個文件
