Webpack 将多个文件输出到多个目录

#1

例如：
我的工程如下，然后我想将：
button下的index.jsx编译为当前目录下的index.js
将grid下的index.jsx编译为当前目录下的index.js
然后将他们公用的库，编译到demo下面的common.js

1 Like
新手问一个小白问题，关于webpack的输出文件
#2

查了一下，webpack貌似没有针对每个文件配置编译后的路径。

个人建议将文件统一生成到一个目标目录比较好，题主说的生成到“当前目录下“不是好的实践，发布代码应该与源码进行目录分离。如果担心重名的情况，可以配置规则解决：

entry = {
    "button": "demo/button/index.jsx"),
    "grid": "demo/grid/index.jsx")
},
output: {
    path:  'dist/js',
    filename: "[name].js",
    chunkFilename: "[name].js"
},
plugins: [
    new CommonsChunkPlugin("common.js", ["button", "grid"])
]

output中的[name]对应于entry中的key值，因此生成后的文件名是button.js和grid.js。

#3

谢谢你的解答，想了一下午，想出了个解决办法
首先在定义entry的时候可以，
entry = {
“/demo/button”: “demo/button/index.jsx”),
“/demo/grid”: “demo/grid/index.jsx”)
}
然后输出的时候，就能建到指定目录下去了

1 Like
#4

也是可行的方案，对这个问题有效 :+1: