我正在使用webpack制作cms模板。
在某些css文件中,我使用了一些图像,例如background-image: url('../images/space-bg.jpg');
所有图像都在webpack文件夹中,我希望webpack将其推送到公用文件夹中。
目前,我在index.js文件中使用了一些硬编码规则,例如import '../images/space-bg.jpg';
但是我想知道是否有一种方法可以自动处理它们?
这是我的webpack.config.js:
var path = require('path');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/js/index.js',
output: {
filename: 'js/theme-[contentHash].js',
path: path.resolve('./assets'),
publicPath: 'themes/mazdigital/assets'
},
plugins: [
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, 'layouts/default.htm'),
template: './src/layouts/default.htm'
}),
new MiniCssExtractPlugin({
filename: 'css/theme-[contenthash].css',
chunkFilename: '[id]-[contenthash].css',
}),
new CleanWebpackPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader?url=false',
'postcss-loader'
],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]'
}
},
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: 'images/[name].[ext]',
}
},
],
},
};
答案 0 :(得分:0)
您需要确保css-loader
的配置正确。
您在配置中使用'css-loader?url=false'
。该查询字符串禁用了将url(...)
表达式视为require/import
语句的功能。
因此,您的第一个加载程序规则应为:
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // <- removed ?url=false
'postcss-loader'
],
}