loader
| 名称 | 描述 |
|---|---|
| babel-loader | 转换ES6、ES7等JS新特性语法 |
| css-loader | 支持.css文件的加载和解析 |
| less-loader | 将less文件转换成css |
| ts-loader | 将TS转换成JS |
| file-loader | 进行图片、字体等的打包 |
| url-loader | 进行图片、字体等的打包，还可设置较小资源的自动base64 |
| raw-loader | 将文件以字符串的形式导入 |
| thread-loader | 多进程打包JS和CSS |
Plugins
| 名称 | 描述 |
|---|---|
| CommonsChunkPlugin | 将chunks相同的模块代码提取成公共js |
| CleanWebpackPlugin | 清理构建目录 |
| ExtractTextWebpackPlugin | 将CSS从bundle文件里提取成一个独立的CSS文件 |
| CopyWebpackPlugin | 将文件或者文件夹拷贝到构建的输出目录 |
| HtmlWebpackPlugin | 创建html文件承载输出的bundle |
| UglifyjsWebpackPlugin | 压缩JS |
| ZipWebpackPlugin | 将打包出的资源生成一个zip包 |
Mode
| 名称 | 描述 |
|---|---|
development |
设置process.env.NODE_ENV的值为development.开启NamedChunksPlugin 和 NamedModulesPlugin. |
production |
设置process.env.NODE_ENV的值为production.开启FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurenceOrderPlugin，SideEffectsFlagPlugin 和 TerserPlugin。 |
none |
不开启任何优化选项 |
css解析
css-loader 用于加载 .css 文件，并且转换成commonjs 对象；
style-loader 将样式通过 <style> 标签插入到 head 中。
loader 的调用顺序是链式调用的，是从右到左的，所以在配置 rules 的时候，要注意两者的先后顺序
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
less 解析
加载 less 和 less-loader
同 css 解析规则一样，需要将 less-loader 放置到 use 最右面
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
url-loader
进行图片、字体等的打包，还可设置较小资源的自动base64
优点：可以减少一次http请求
缺点：会使打包文件变大，延长首次加载白屏时间
{
test: /.(png|jpg|gif|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 10240 // 如果图片大小小于10k，自动打包成base64
}
}]
}
网友评论