抽离 css 文件
- 目前 css 代码被 css-loader 转换后，交给 style-loader 进行处理，style-loader 使用的方式是用一段 js 代码，将样式加入到 style 元素中；
- 在实际的开发中，往往希望依赖的样式最终形成一个 css 文件 （link 的方式引入），此时，就需要用到一个库 mini-css-extract-plugin，该库提供了 1 个 plugin 和 1 个 loader；
- plugin：负责生成 css 文件；
- loader：负责记录要生成的 css 文件的内容，同时导出开启 css-module 后的样式对象；
配置文件示例
const HtmlWebpackPlugin = require("html-webpack-plugin");
var { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development",
entry: {
main: "./src/index.js",
other: "./src/other.js"
},
output: {
filename: "js/[name].[chunkhash:5].js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader, // 替换掉了 "style-loader"
{
loader: "css-loader",
options: {
modules: true,
minimize: true,
},
},
"postcss-loader",
"less-loader"
],
},
{
test: /\.jpg$/, use: {
loader: "file-loader",
options: {
name: "img/[hash:5].[ext]"
}
}
}
]
},
devServer: {
open: true
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html"
}),
new MiniCssExtractPlugin({
filename: "css/[name].[contenthash:5].css"
})
]
}
打赏作者
您的打赏是我前进的动力
微信
支付宝
vue3🛫 setup 语法糖
上一篇
评论
