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