可以查看官方中文文档。
1、什么是loader。
webpack目前只能直接打包js和json文件。如果想打包css、图片、 TypeScript等,需要借助loader实现。
loader就是转换器,可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中import CSS文件。
比如,你想打包css,就需要下载css的loader。
2、下载安装loader。
下面是安装打包CSS需要的loader。
npm install --save-dev style-loader css-loader
下面是加载图片需要的loader。
npm install --save-dev file-loader url-loader
3、webpack.config.js 中使用loader。
const path = require('path');//node内置的模块,用来设置路径
// 因为我们整个js文件被node封装在一份方法中运行。__dirname是node调用方法时传递进来的,表示当前目录。
module.exports = {
entry: './src/js/app.js',//entry 配置当前项目的入口文件
output: { //output 配置输出
filename: 'bundle_app.js', //输出的文件名
path: path.resolve(__dirname, 'dist/js') //输出的路径 resolve拼接一个目录,
},
module: {
rules: [
{
test: /\.css$/, //css结尾的文件,用style-loader、css-loader来处理。
use: [
{loader: 'style-loader' },
{loader: 'css-loader'}
]
},
{
test: /\.(png|jpg|gif)$/, //图片用下面loader来处理
use: [
{
loader: 'url-loader',
options:{
limit:8192 //小于8192bit的图片,使用base64来加载。
}
}
]
}
]
}
};
注意上面的代码。在module -->rules 中使用loader,并且css文件用2个loader处理转换。图片用一个loader处理转换。
4、测试代码。
CSS文件夹下新建文件test.css,内容如下:
body{ background: red; }
入口app.js的内容:里面导入了test.css文件
import {add,sub} from "./math";
import data from "./data.json";
import "../css/test.css"
document.write("执行了entry.js文件。。。。。。。。。。。" + "</br>");
document.write("3+2 = " + add(3,2) + "</br>");
document.write("25 - 20 = " + sub(25,20) + "</br>");
document.write("data 是"+JSON.stringify(data));
目录结构如下。
5、运行webpack命令打包。
test.html文件中使用打包好的文件。test.html文件内容如下:
打开test.html之后。看到背景确实变红了。示例成功。