1.webpack处理第三方文件的过程
当发现不是js文件,会先去配置文件找有没有对应的第三方loader规则
如果找到对应的规则就会调用相应的loader处理这种文件,如果没有,就会报错
调用loader的顺序是从后往前
当最后一个loader处理完毕后,会将结果直接交给webpack进行打包
2.处理css的第三方loader
- 导入css
在导入页面的js文件中
import './css/index.css'
导入的样式,默认全局生效
- 安装第三方loader加载器
webpack不支持打包css文件,只能打包js文件
npm i style-loader css-loader -D
3.配置匹配和处理规则
打开webpack.config.js,新增一个配置节点module,增加一个rules属性(存放所有第三方文件的匹配和处理规则)
module:{
rules:[
{test:/\.css$/
//匹配css结尾的文件
,use:['style-loader','css-loader']}
//处理css文件的第三方loader
]
}
参数:
modules:
这是将样式类名修改为一个可变的类名,每个引用都会使用不同的类名,这样就能实现模块化
css-loader后面跟modules可以启用样式模块化,详情参考在react组件中使用样式
3.处理less的第三方loader
能够处理.less文件的loader
- 安装命令
安装loader
npm i less-loader -D
安装less(less-loader内部依赖)
npm i less -D
- 配置匹配和处理规则
打开webpack.config.js,新增一个配置节点module,增加一个rules属性(存放所有第三方文件的匹配和处理规则)
module:{
rules:[
{test:/\.less$/,
use:['style-loader','css-loader','less-loader']}
]
}
4.处理scss的第三方loader
- 安装scss-loader
npm i sass-loader -D(内部依赖node-sass)
cnpm i node-sass
- 配置匹配规则
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
5.处理.vue文件
- 安装相应loader
cnpm i vue-loader vue-template-compiler -D
- 新增匹配规则
在webpack.config.js文件中
module.exports={
module:{
//匹配规则
rules:[
{ test: /\.vue$/, use: "vue-loader" }
]
}
}
- 配置插件
module.exports={
//插件
plugins:[
new VueLoaderPlugin()
]
}