我正在构建一个具有特定 Webpack 配置的 CSS 库,仅用于捆绑 CSS 和图像。
这是我当前的配置:
const CssEntryPlugin = require("css-entry-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
"styles": "./assets/css/lib.scss"
},
output: {
path: __dirname + "/static/",
filename: "lib.css"
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'postcss-loader', 'sass-loader'],
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
}
}
]
}
]
},
plugins: [
new ExtractTextPlugin('lib.css'),
]
};
问题是当我运行它时,图像没有被处理,因为它们没有导入到 .css 入口点文件中。如何确保所有图像都已处理?我应该编写一个 .js 文件以同时包含 CSS 和图像作为入口点,还是有解决方法?
最佳答案
您可以将一些 require()
语句添加到您的入口点 .scss 中,或者创建一个单独的文件,就像您建议的那样。我已经成功完成了后者。
另一种选择是像这样提供一个数组作为入口点:
entry: {
"styles": ["./assets/css/lib.scss", "./assets/img/whatever.png"]
},
关于css - Webpack 配置仅用于 css 和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47394220/