常用的样式资源主要是css、less、sass、styus
1、处理css文件用到的loader主要是style-loader、css-loader
2、处理less文件用到的loader主要是style-loader、css-loader、less-loader (需要安装less)
3、处理sass文件用到的loader主要是style-loader、css-loader、sass-loader (需要安装sass)
4、处理styus文件用到的loader主要是style-loader、css-loader、styus-loader (需要安装styus)
为了使每次打包后删除原来的文件重新生成新的文件,需要用到clean-webpack-plugin插件
相关配置
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: "./src/index.js",
output:{
filename:'bundle.js',//打包后的文件(如果想加让打包出来的文件都不一样,可以加hash,bundle.[hash].js)
path:path.resolve(__dirname,'dist')//路径必须是绝对路径
},
mode:'development'
module:{
//css-loader简析@import require 这种语法,整合到js文件中
//style-loader 创建style标签,放到样式中
//loader的执行顺序默认从右到左,多个loader用[],字符串只用一个loader,也可以是对象的格式
rules:[
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: { //注意,此处使用insert,不能使用insertAt,否则会报错
insert: 'top'//Style-loader 将 <style> 元素附加到样式目标(style target)的末尾,即页面的 <head> 标签,。这将导致 loader 创建的 CSS 优先于目标中已经存在的 CSS。
}
},'css-loader']
},
{
test: /\.less$/,
use:["style-loader", "css-loader", "less-loader"]
},
{
test: /\.scss$/,
use:["style-loader", "css-loader", "sass-loader" ]
},
{
test: /\.stylus$/,
use:["style-loader","css-loader", "stylus-loader"]
}
]
},
plugins:[
new CleanWebpackPlugin(),
]
}