我正在做一个带有Webpack设置的React,并且正在努力做应该看起来很简单的事情。我希望webpack包含图像,并像使用gulp一样将其最小化,但我无法弄清楚。我只希望能够像这样在我的CSS中链接图像:
/* ./src/img/background.jpg */ body { background: url('./img/background.jpg'); }
我所有的css / js / img文件夹都放在src文件夹中。Webpack输出到dist文件夹,但是我不知道如何在那里获取图像。
这是我的webpack设置:
var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { devtool: 'cheap-eval-source-map', entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/dev-server', './src/index.js' ], output: { path: path.join(__dirname, 'dist'), // publicPath: './dist', filename: 'bundle.js' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) ], module: { loaders: [{ exclude: /node_modules/, test: /\.js?$/, loader: 'babel' }, { test: /\.scss$/, loader: 'style!css!sass' }, { test: /\.(png|jpg)$/, loader: 'file-loader' }] }, devServer: { historyApiFallback: true, contentBase: './dist', hot: true } };
我陷入类似的问题,发现您可以像其他任何require或import语句一样使用它url- loader来解析"url()"CSS中的语句。
url- loader
"url()"
要安装它:
npm install url-loader --save-dev
它将安装可以将解析路径转换为BASE64字符串的加载程序。
在您的webpack配置文件中,在加载器中使用url-loader
{ test: /\.(png|jpg)$/, loader: 'url-loader' }
另外,请确保正确指定了公共路径以及要加载的图像的路径。