Webpack изменить CSS образом пути после того, как построить

Question

в развитии, у меня есть эта структура:

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

В производстве, у меня есть эта структура:

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

Таким образом, в развитии моего изображения URL должен быть относительно папка IMG так:

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

Но в производстве должно быть так:

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

Как мы решаем эту проблему с помощью webpack или вообще?

Answer 1

У вас должен быть publicPath в конфигурации webpack.

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