webpack 配置分离css插件
以css配置示例,less与sass同理
1. 使用旧版的ExtractTextPlugin插件
安装
npm install extract-text-webpack-plugin@next --save-dev
在webpack.config.js中配置
const extractTextPlugin=require('extract-text-webpack-plugin')
module.exports={
//...code
module:{
rules:[{
test:/\.css$/,
use:extractTextPlugin.extract({
fallback:"style-loader",
use:['css-loader'],
publicPath:"../"
})
}]
},
plugins:[
new extractTextPlugin("./css/[name].css")//输出路径
]
}
如果还使用了根据css自动加前缀loader
const extractTextPlugin=require('extract-text-webpack-plugin')
module.exports={
//...code
module:{
rules:[{
test:/\.css$/,
use:extractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', {
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')]
}
}]
publicPath: '../'
})
}]
},
plugins:[
new extractTextPlugin("./css/[name].css")//输出路径
]
}
使用方法
配置完成后运行webpack打包即可
2.使用新版mini-css-extract-plugin 插件
安装
npm install mini-css-extract-plugin --save-dev
在webpack.config.js中配置
const miniCssPlugin=require('mini-css-extract-plugin');
module.exports={
module:{
rules:[
{
test:/\.css$/,
use: [{
loader: miniCssPlugin.loader,
options: {
publicPath: '../'
}
}, 'css-loader']
}
]
},
plugins:[
new miniCssPlugin({
filename:'./css/[name].css'
})
]
}
"你的指尖,拥有改变世界的力量! "
欢迎关注我的个人博客:https://sugarat.top
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧