loader
| 名稱 | 描述 |
|---|---|
| babel-loader | 轉(zhuǎn)換ES6、ES7等JS新特性語法 |
| css-loader | 支持.css文件的加載和解析 |
| less-loader | 將less文件轉(zhuǎn)換成css |
| ts-loader | 將TS轉(zhuǎn)換成JS |
| file-loader | 進行圖片、字體等的打包 |
| url-loader | 進行圖片、字體等的打包，還可設(shè)置較小資源的自動base64 |
| raw-loader | 將文件以字符串的形式導(dǎo)入 |
| thread-loader | 多進程打包JS和CSS |
Plugins
| 名稱 | 描述 |
|---|---|
| CommonsChunkPlugin | 將chunks相同的模塊代碼提取成公共js |
| CleanWebpackPlugin | 清理構(gòu)建目錄 |
| ExtractTextWebpackPlugin | 將CSS從bundle文件里提取成一個獨立的CSS文件 |
| CopyWebpackPlugin | 將文件或者文件夾拷貝到構(gòu)建的輸出目錄 |
| HtmlWebpackPlugin | 創(chuàng)建html文件承載輸出的bundle |
| UglifyjsWebpackPlugin | 壓縮JS |
| ZipWebpackPlugin | 將打包出的資源生成一個zip包 |
Mode
| 名稱 | 描述 |
|---|---|
development |
設(shè)置process.env.NODE_ENV的值為development.開啟NamedChunksPlugin 和 NamedModulesPlugin. |
production |
設(shè)置process.env.NODE_ENV的值為production.開啟FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurenceOrderPlugin，SideEffectsFlagPlugin 和 TerserPlugin。 |
none |
不開啟任何優(yōu)化選項 |
css解析
css-loader 用于加載 .css 文件，并且轉(zhuǎn)換成commonjs 對象；
style-loader 將樣式通過 <style> 標簽插入到 head 中。
loader 的調(diào)用順序是鏈式調(diào)用的，是從右到左的，所以在配置 rules 的時候，要注意兩者的先后順序
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
less 解析
加載 less 和 less-loader
同 css 解析規(guī)則一樣，需要將 less-loader 放置到 use 最右面
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
url-loader
進行圖片、字體等的打包，還可設(shè)置較小資源的自動base64
優(yōu)點：可以減少一次http請求
缺點：會使打包文件變大，延長首次加載白屏?xí)r間
{
test: /.(png|jpg|gif|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 10240 // 如果圖片大小小于10k，自動打包成base64
}
}]
}
