使Webpack输出文件相对于输入文件

Question

假设我希望我编译的JavaScript文件与我的源文件并排存在，从而形成如下目录结构：

- TimeframeToolbar
    - TimeframeToolbar_compiled.js
    - TimeframeToolbar_src.js
    - dependencies
        - *contains js files that are imported by TimeframeToolbar_src.js*

是否可以使用Webpack执行此操作？据我所知，输出路径只允许一个目录，这意味着源和编译的文件树必须完全分开。

Answer 1

诀窍是使条目配置对象的键成为输出文件所需的路径。例如：

entry: {
    'feature-1/feature-1': './dev/feature-1/feature-1.jsx',
    'feature-2/feature-2': './dev/feature-2/feature-2.jsx',
},
output: {
    filename: '[name].js',
    path: './build',
}

这将产生以下编译文件：

./build/feature-1/feature-1.js
./build/feature-2/feature-2.js

基本上[name]中的output.filename占位符最终成为目录路径，而不仅仅是文件名。