Webpack css在构建后更改图像路径

Question

在开发中，我有这样的结构：

- dist - contain the css bundle
- sass - style.scss
- js
- img
- index.html

在制作中，我有这样的结构：

- img
- some-hash.js
- some-hase.css
- index.html

所以在开发中我的图片网址应该是相对于img文件夹的，如下所示：

background: url('../img/logo.jpg');

但在制作中它应该是这样的：

background: url('img/logo.jpg');

我们如何使用webpack或一般来解决这个问题？

Answer 1

您需要在webpack配置中使用publicPath。

webpack-howto

＆＃13;

＆＃13;

module.exports = {
  entry: './main.js',
  output: {
    path: './build', // This is where images AND js will go
    publicPath: 'http://mycdn.com/', // This is used to generate URLs to e.g. images or publicPath: '/'
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' } // inline base64 URLs for <=8k images, direct URLs for the rest
    ]
  }
};

＆＃13;

＆＃13;

＆＃13;