webpack图片处理

webpack图片处理

如果在css文件中，背景设置成图片，我们直接通过之前步骤配置css,然后就会报错，图片又需要对应的loader进行配置。直接在css中运用图片，以及添加了依赖。

url-loader配置

第一步安装url-loader

npm install [email protected] --save-dev

第二部在webpack.config.js的rules添加

{
     
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [{
     
    loader:'url-loader',
    options: {
     
      limit:8192
    }
  }]
}

//当加载图片，小于limit时，会将图片编译成base64字符串形式
//当加载图片，大于limit时，会将图片使用file-loader模块加载

所以还要安装一个file-leader

npm install --save-dev [email protected]

这个loader不需要在config.js里配置

同时需要在config.js里配置output

output: {
     
  /*绝对路径，动态获取,第一个参数获取当前文件所在路径，我们要放到dist文件夹下*/
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath:'dist/'
},

publicPath属性目的是，将所有涉及到url的路径前都加上值得路径。为得是将打包后得图片放到dist文件夹下，这个文件夹用于发布。

现在是由于我们没有将html打包放入dist文件，所以需要加路径找到图片，如果放入，就可以直接找到打包后图片。

当我们安装完成后，大于8kb文件再次打包，会将该图片放到dist文件夹下，采用哈希值重新命名图片

但是真实开发我们还是需要有一定规范的名字

在options中添加

options: {
     
  //当加载图片，小于limit时，会将图片编译成base64字符串形式
  //当加载图片，大于limit时，会将图片使用file-loader模块加载
  limit:8192,
  name:'img/[name].[hash:8].[ext]'
}

意思是：在img文件夹下，[name]就是原来得名字.[hash:8]取八位哈希值.[ext]原来得文件后缀。

注意这里要加[]，如果不加括号会当成字符串，而不是变量。