什么是Loader?
webpack通过扩展对应的loader以支持更多文件的转化,如scss,less转换成css;ES6转换为ES5代码等。大部分loader可以在webpack官网找到,并学习对应的用法。
loader的使用过程
1. 通过npm安装需要使用的loader
2.在webpack.config.js中的module关键字下配置
1.利用css-loader和style-loader给css文件打包
项目中新建一个css文件夹,文件夹内新建normal.css文件:
body{
background-color: aqua;
}
在webpack官网查询styling相关的loader并下载
npm install --save-dev css-loader
npm install --save-dev style-loader
在webpack.config.js文件进行module配置
const path = require('path') //node包里找路径
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname, 'dist'), //动态获取绝对路径
filename:'bundle.js', //打包后的文件
},
module: {
rules: [
{
test: /\.css$/i, //正则表达式查询所有css文件
use: ["style-loader", "css-loader"], //读取从右往左,顺序颠倒打包会报错
//css-loader只负责将css文件进行加载
//style-loader负责渲染
},
],
},
}
终端使用命令npm run build进行打包,打包成功后可以看到html的body元素颜色被渲染
*踩坑
如果loader的下载版本过高时会出现如下报错:
此时降低css-loader与style-loader的版本等级即可打包成功。