[英]How can I get webpack to emit its output to two locations?
我目前的配置如下:
output: {
filename: 'bundle.js',
path: OUT_DIR
},
但是我需要 bundles.js 去两个目录?
我可以通过简单地将目录数组传递给路径来完成此操作吗?
还是我需要做一些更复杂的事情?
目前我有一个 bash 脚本cpll
,我必须在每次构建后手动输入它,这很乏味。
希望 webpack 有一个配置选项可以将输出发送到两个或多个位置。
研究
这个 SO 问题已经有 4 年历史了,并且没有我要找的东西 - 所以
文档在这里没有提到一种方法 - webpack 。
如果没有配置选项,我如何让它自动运行 bash 命令?
我尝试向它传递一个字符串数组而不是一个字符串,但它因明显的错误而崩溃:
无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。 - configuration.output.path 应该是一个字符串。
传递数组将不起作用。 嗯。
从谷歌开始尝试另一种方法 - 搜索
提出了一个可能的解决方案 - 所以
每个请求 - 完整的 exportFunc
const exportFunc = ( env ) => {
console.log('webpack.config.js-exportFunc', OUT_DIR);
return {
entry: `${IN_DIR}/index.jsx`,
output: {
filename: 'bundle.js',
path: '/Users/c/_top/ll-front/dist'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.jsx?/,
include: IN_DIR,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-class-properties'],
}
}
}
]
}
};
};
module.exports = exportFunc;
您可以通过导出一组配置来使用webpack 的多编译器模式。
如文档中所示:
您可以导出多个配置(自 webpack 3.1.0 起支持多个功能),而不是导出单个配置对象/函数。 运行 webpack 时,所有配置都已构建。
例如:
const config = {
// your webpack config
}
const outputPaths = ["path/one", "path/two"]
module.exports = outputPaths.map(outputPath => {
return {
...config,
name: outputPath,
output: {
...config.output,
path: path.resolve(__dirname, outputPath)
}
}
})
当您使用函数配置时,您可以执行以下操作:
const outputPaths = ["path/one", "path/two"]
module.exports = outputPaths.map(outputPath => {
return env => {
return {
entry: `${IN_DIR}/index.jsx`,
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, outputPath)
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.jsx?/,
include: IN_DIR,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-class-properties'],
}
}
}
]
}
};
}
})
您可以改用多个配置。 这是webpack 文档链接。
为避免代码重复,请将您当前的配置视为一个对象。 然后复制该对象并覆盖复制对象的输出部分。 最后将两个对象放入一个数组中。 使用该数组作为您的新配置。
var yourCurrentConfig = {...};
var secondaryDestinationConfig = Object.assign(yourCurrentConfig, {
output: {
path: {
filename: 'bundle.js',
path: SECONDARY_DIR
}
}
});
var newConfig = [
yourCurrentConfig, secondaryDestinationConfig
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.