webpack 图片处理问题

jsliang
  • 309

clipboard.png

情景:上面是我打包后的文件夹,然后index.html、about.html使用<img>引用图片、文件夹css下*.css使用background:url()引用图片。

clipboard.png

问题:上面是我打包前的开发文件,我如何在webpack中设置(使用什么loader如何配置),才能使webpack在打包中,看到html文件时就把引用的路径改为./images/*.png,在看到css文件时就把引用的路径改为../images/*.png ?

个人尝试:

{
 test: /\.(jpg|jpeg|png|gif|svg)$/,
 use: [
  'url-loader?limit=10240&name=images/[name].[ext]'
 ]
}

上面这种方式只能正确加载html的图片引用(使用了html-withimg-loader)

{
 test: /\.(jpg|jpeg|png|gif|svg)$/,
 use: [{
  loader: 'file-loader',
  options: {
   name: '[name].[ext]',
   publicPath: '../images/',
   outputPath: 'images/'
  }
 }]
}

上面这种方式只能正确加载css的图片引用

本人初学webpack,求解。

————————————————————————————
2018年6月29日16:25:14
补充说明:

刚才我自己去网上找了下,使用publicPath可以正确解决,但是这个路径写死了,不太好:

    

    {
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        loader: 'url-loader',
        options: {
            limit: 10240,
            name: 'images/[name].[hash:7].[ext]',
            publicPath: "E:/MyWeb/jsliang-web/Webpack/webpack-6/dist"
        }
    },

希望能有更好的答案~

回复
阅读 1.5k
2 个回答
小哈
  • 214
✓ 已被采纳

使用

publicPath = '/' 

试试

http://localhost:12345/index.html

按照你给的github已经验证过了没问题。

clipboard.png

喜欢追风筝的人
  • 79

可以试试这样,统一从根目录下获取地址

const path = require('path')

// ...
{
    test: /\.(jpg|jpeg|png|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10240,
      name: path.posix.join(__dirname, 'dist/images/[name].[hash:7].[ext]'); // 后面的路径是相对于 webpack.conf.js 的路径
    }
}
宣传栏