5 loader

可以让入口文件的index.js处理非js文件

5-1 配置css

yarn add css-loader style-loader

#index.js
import './assets/index.css'
console.log(1);

# webpack.config.js
const path = require("path");
module.exports = {
    ...
    module: {
        rules: [
            { test: /\.css$/, use:["style-loader", "css-loader"] }
        ]
    },
}

index.js 文件中引入

使用

<script src="../dist/bundle.js"></script>

5-2 处理图片

yarn add url-loader file-loader

# webpack.config.js
const path = require("path");
module.exports = {
    ...
    module: {
        rules: [
            { test: /\.css$/, use: ["style-loader", "css-loader"] }, 
            {                                           //++处理图片
                test: /\.(png|jpg|gif|svg|jpeg)$/i,
                use: [
                    {
                       loader: "url-loader",
                       options:{
                           limit:1024
                       }
                    }
                ]
            }
        ]
    },
}

打包成功