Javascript Webpack-编译两个具有不同资产路径的输出包
我正在尝试用网络组件建立一个网站。问题是,我需要两个不同的包,它们具有指向CSS中图像的不同路径。路径保存在CSS文件中,并且必须保持相对 这是我目前用来生成CSS部分的构建管道Javascript Webpack-编译两个具有不同资产路径的输出包,javascript,css,webpack,sass,web-component,Javascript,Css,Webpack,Sass,Web Component,我正在尝试用网络组件建立一个网站。问题是,我需要两个不同的包,它们具有指向CSS中图像的不同路径。路径保存在CSS文件中,并且必须保持相对 这是我目前用来生成CSS部分的构建管道 ... test: /\.css|\.scss$/, use: [ { loader: 'polymer-css-loader', options: { minify: false } }, 'extract-loader', 'css-loader', 'pos
...
test: /\.css|\.scss$/,
use: [
{
loader: 'polymer-css-loader',
options: {
minify: false
}
},
'extract-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
...
我可以使用文件加载器更改路径,以向图像发出公共路径。问题是,我需要一个使用原始路径的包,另一个使用另一个路径
...
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
}
}
]
}
}
]
更多信息