4.WebPack-Loader
一.什么是Loader
WebPack默认只“认识”以*.js结尾的文件，如果想处理其他类型的文件，就必须添加Loader，有各种各样的Loader，每个Loader可处理不同类型的文件，每当用WebPack打包时遇到不认识的文件（通过后缀名辨别），如果添加了相应的Loader，就会调用指定的Loader去处理，处理完之后，如果没有后继的Loader去处理这类文件，就会返回给调用端，也就是WebPack，WebPack继续处理，直到处理完成。
二.各种各样的Loader
1.style-loader和css-loader
我们在./src/目录下新建一个index.css文件
body{
background-color: red;
}
然后在index.js文件中添加如下操作
import "./index.css"
执行
npm run build
会产生以下输出结果
ERROR in ./src/index.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body{
| background-color: #ddd;
| }
@ ./src/index.js 1:0-20
我们安装css-loader和style-loader
在webpack.config.js配置文件中添加Loader
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /.css$/, //匹配规则，匹配就使用一下Loader去处理
use: [ "style-loader","css-loader",] //这里要注意顺序，Loader加载顺序规定为从右到左
}
]
}
};
注意，css-loader负责读取css文件以及解释import和require()语句，style-loader负责产生<style></style>标记并把样式字符串插入到该标记中。
我们再次打包
npm run build
然后运行可以发现页面背景变红了
可以看到插入了一个style标签。
2.file-loader
安装
npm install file-loader –save-dev
添加图片资源
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /.css$/,
use: [ "style-loader","css-loader",]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [ "file-loader"]
}
]
}
};
在index.css文件中添加如下代码
body{
background-color: red;
background-image: url(./yasuo.jpg);
}
由于产生的文件是一个相对路径（相对于输出目录），所以把index.html放到./dist目录下，并修改bundle.js引用的路径，运行
npm run build
效果如下：
运行页面
