制作的WebPack输出文件相对于输入文件

假设我希望我的编译JavaScript文件存在并排侧与我的源文件，从而导致类似的目录结构：制作的WebPack输出文件相对于输入文件

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

是否有可能用Webpack做这件事？据我所知，输出路径只允许一个目录，这意味着源文件和编译的文件树必须完全分离。

来源

2016-06-14 maxedison

您需要为每个文件指定一个条目（glob it）并使用输出模式。如果可能的话，假设你正在使用它，直接通过Babel可能是有意义的。 –

你能解释我将如何使用路径的输出模式？我看到我可以执行诸如'filename：“[name] .bundle.js”''的操作，但是我没有看到使用该路径进行操作的选项。事实上，[输出路径的文档状态]（https://webpack.github.io/docs/configuration.html#output-path）：'输出目录为绝对路径（必需）.'我也不会'不知道你在建议什么巴别尔解决方案。我确实在使用巴别塔，但我不清楚这将如何改变。 – maxedison

好的，我现在看到了。为了获得足够的控制权，您需要生成一个类似'module.exports = [{... config ...}，{... config ...}]'的结构。我认为这将对输出提供足够的控制。在这种特殊情况下，您可能会发现直接通过Babel更方便，因为webpack在此用例中运行不正常。 –

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

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最后成了一个目录路径，而不仅仅是一个文件名。

来源

2016-10-10 22:48:29 maxedison

制作的WebPack输出文件相对于输入文件

回答

相关问题