的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

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 
 
    ] 
 
    } 
 
};