使用webpack打包css文件
import './css/index.css'
直接运行会报错,需要配置loader
- 运行
cnpm i style-loader css-loader --save-dev
- 修改
webpack.config.js
这个配置文件:
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
//处理css文件的规则
]
}
- 注意:
use
表示使用哪些模块来处理test
所匹配到的文件;use
中相关loader模块的调用顺序是从后向前调用的,先电筒
使用webpack打包less文件
- 运行
cnpm i less-loader less -D
- 修改
webpack.config.js
这个配置文件:
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
使用webpack打包sass文件
- 运行
cnpm i sass-loader node-sass --save-dev
- 在
webpack.config.js
中添加处理sass文件的loader模块:
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
最终代码
module: {
// 这个节点,用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{
test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 配置处理 .css 文件的第三方loader 规则
{
test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
//配置处理 .less 文件的第三方 loader 规则
{
test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
// 配置处理 .scss 文件的 第三方 loader 规则
]
}
}
总结
注意:webpack,默认只能打包处理Js类型的文件,无法处理其它的非js类型的文件;
如果要处理非s类型的文件,我们需要手动安装一些合适第三方1oader加载器;
1.如果想要打包处理css文件,需要安装 cnpm i style-loader css-loader-D,其他文件也一样。
2.打开webpack.config.js这个配置文件,在里面,新增一个配置节点,叫做module,它是一个对象;在这个module对象身上,有个rules属性,这个rules属性是个数组;这个数组中,存放了,所有第三方文件的匹配和处理规则;
注意:webpack 处理第三方文件类型的过程:
1.发现这个要处理的文件不是J5文件,然后就去置文件中,查找有没有对应的第三方1oader 规则。
2.如果能找到对应的规则,就会调用对应的loader处理这种文件类型;
3、在调用loader的时候,是从后往前调用的;
4.当最后的一个loader调用完毕,会把处理的结果,直接交给webpack进行打包合并,最终输出bundle.je中去