我正在尝试使用 Webcomponents 构建网站。问题是,我需要两个不同的包,它们在 CSS 中具有不同的图像路径。路径保存在 CSS 文件中,并且必须保持相对。
这是我目前用来生成 CSS 部分的构建管道。
...
test: /\.css|\.scss$/,
use: [
{
loader: 'polymer-css-loader',
options: {
minify: false
}
},
'extract-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
...
我可以使用文件加载器更改路径以发出图像的公共(public)路径。问题是,我需要一个包使用原始路径,一个包使用另一条路径。
...
test: /\.(png|gif|jpg|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'static/images/[name].[ext]',
emitFile: false
}
}
]
...
最佳答案
您可以将两个配置传递给 webpack,并根据您的需要在每个配置中配置文件加载器:
module.exports = [
{
entry: './example',
output: {
path: path.join(__dirname, "dist"),
filename: 'app1.js'
},
module: {
rules: [
{
test: /\.(png|gif|jpg|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'static/images/[name].[ext]',
emitFile: false
}
}
]
}
},
{
entry: './example',
output: {
path: path.join(__dirname, "dist"),
filename: 'app2.js'
},
module: {
rules: [
{
test: /\.(png|gif|jpg|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'static/other/path/images/[name].[ext]',
emitFile: false
}
}
]
}
}
]
更多信息 https://github.com/webpack/webpack/tree/master/examples/multi-compiler
关于javascript - Webpack - 编译两个具有不同 Assets 路径的输出包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54304381/