基础用法
大约 1 分钟约 377 字...
官方文档
npm i webpack webpack-cli -D
entry 项目入口
output构建产物输出
各类资源处理
loader如果配置了多个`loader`,按照从右到左的顺序执行
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader',],
}]
}
处理样式资源
CSS
虽然使用 css-loader
可以将 CSS
文件转换为 JavaScript
模块,但是这仅仅是将 CSS
代码打包进 JavaScript
文件中,并没有将样式应用到页面上。因此,还需要使用 style-loader
将 CSS
代码动态地插入到HTML
页面的 <style>
标签中,从而实现将样式应用到页面上的功能
SCSS
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
使用MiniCssExtractPlugin.loader
会将 CSS
提取到单独的文件中,注意的是它和style-loader
冲突
功能扩展
Plugin提示
Loader
主要是用于处理模块的转换,Plugin
则是用于扩展Webpack
的功能。在Webpack
的打包过程中,Loader
和Plugin
是密不可分的两个部分,Loader
用于将不同类型的文件转换为Webpack
可处理的模块,Plugin
则用于在打包过程中执行自定义的任务和操作
HtmlWebpackPlugin 创建html
MiniCssExtractPlugin 提取css
CssMinimizerWebpackPlugin 压缩css
需要在 optimization.minimizer
配置
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},