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

Question

In development, i have this structure:

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

In production, i have this structure:

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

So in development my image url should be relative to the img folder like this:

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

But in production it should be like this:

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

How we solve this problem with webpack or in general?

Answer 1

You need have publicPath in webpack config.

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