url-loader图片打包

Posted 2021-06-17 ajaXJson

1.搭建

src下新建img文件夹放入图片,normal.css文件中引用图片

body{
    background-color: red;
    background: url("../img/small.jpg");
}

1.webpack.config.js中引入

 {
                test:/\\.(png|jpg|gif|jpeg)$/,
                use:[
                    {
                        loader:\'url-loader\',
                        options:{
                            // 当加载图片小于limit时，会将图片编译成base64字符串形式
                            // 当加载图片大于limit时，需要使用file-loader模块进行加载
                            limit:8192
                        }
                    }
                ]
            }

2.安装url-loader插件

npm install --save-dev url-loader@1.1.2

3.处理缓存图片超过限定值时 需要使用此插件，

npm install --save-dev file-loader@3.0.1

此插件会将图片大于限制的图片打包至dist文件夹中，而我们引用的图片还是img中的，此时就需要修改图片的路径，但不能引用打包后的路径，所以在webpack.config.js文件的output中添加

publicPath:\'dist/\'

2.运行

npm run build