webpack 处理图片文件

1. 安装 file-loader html-loader

npm install file-loader html-loader --save-dev

其中html-loader生效需配合 html-webpack-plugin (分离html插件)才能生效

2. 在webpack.config.js中配置

module.exports={
    //...code
    module:{
        rules:[
            {   //处理样式表中引入的图片
                test: /\.(png|jpg|gif|jpeg)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash].[ext]',
                    outputPath: './img',
                    esModule: false
                }
            },
            {
                //处理html内联的图片
                test: /\.(html)$/,
                loader: 'html-loader',
                options: {
                    attrs: ['img:src', 'img:data-src']
                }
            }
        ]
    }
}

3. 使用方法

index.css

#bgImg {
    width: 10em;
    height: 10em;
    background: url("./../imgs/favicon.png");
}

index.js

import "./xxx/css/index.css"