Webpack
中文:
loader | webpack 中文文档
Webpack
是一个模块话打包工具,所以它只知道模块相关的事情,Webpack
在最开始的时候只能解析JS
文件相互依赖关系。
如果想要支持非JS
文件类型(如.css
、.png
等),就需要对Webpack
配置文件进行配置。
假设我们现在在index.js
文件中引入一张照片然后执行 npm run build
的时候就报错。
// index.js
import testImage from './logo.png';
let img = new Image();
img.src = testImage;
document.getElementById("app").appendChild(img);
这是因为Webpack
默认只会把JS
文件模块打包,而遇到图片文件的时候它就不知道该怎么打包了。
所以我们要配置module
。
安装:
$ npm install file-loader --save-dev
配置:
// 引用node下的模块
const path = require("path")
module.exports = {
entry: "./src/index.js",
output: {
filename: 'main.js',
path: path.resolve(__dirname, "dist")
},
// 当你打包非一个模块的时候就到这里查询相应的规则
module: {
rules: [{
test: /\.png$/,
use: {
loader: "file-loader"
}
}]
}
}
:::info
所以**loader**
就是一种打包的方案,它会根据你的规则和安装的**loader**
对文件进行打包。
:::