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文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="./bundle_app.js"></script>
</head>
<body>

</body>
</html>

打开test.html之后。看到背景确实变红了。示例成功。

3、loader打包css和图片。

1、什么是loader。

2、下载安装loader。

3、webpack.config.js 中使用loader。

4、测试代码。

猜你喜欢