webpack 图片处理问题

Question

情景：上面是我打包后的文件夹，然后index.html、about.html使用<img>引用图片、文件夹css下*.css使用background:url()引用图片。问题：上面是我打包前的开发文件，我如何在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"         }     },希望能有更好的答案~

Answer 1

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

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 的路径

    }

}

Answer 2

使用

publicPath = '/'

试试

http://localhost:12345/index.html

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