Question

我无法为我的输出包保留文件夹结构。

我尝试使用[path] placeholder，但是它不起作用。有类似的thread，但不能回答我的问题。

我正在使用：Webpack 4.28.4和Node v10.15.0。

条目文件夹结构：

src
|  
+-- blog
|  |
|  +-- index.js
|  
+-- index.js

webpack.config.js：

  entry: {
    main: './src/index.js',
    blog: './src/blog/index.js'
  },
  output: {
    filename: '[path][name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },

输出时，我得到：

dist
|  
+-- [path]blog.c63bf8952b90c5e5ba3e.js
|  
+-- [path]main.9ad0ffac44f9e88f76ce.js

但是我希望：

dist
|  
+-- blog
|  |
|  +-- blog.c63bf8952b90c5e5ba3e.js
|  
+-- main.9ad0ffac44f9e88f76ce.js

注意：我使用[name]占位符标识文件，但最后我将其删除。

Answer 1

如果将条目块的name更改为输出目录中要在输出目录中看到的路径，则将为您解决问题。

例如，如果您像下面那样将博客条目重命名为blog/blog，则当webpack生成包并将其输出到输出目录时，由于文件名是blog/blog，结果将是{{ 1}}。另一个文件仍为dist/blog/blog.[contenthash].js。

这应该为您解决问题：

main.[contenthash].js

Answer 2

对于任何寻找解决方案的人

我发现只有一个使用路径作为条目名称（可能存在一些插件）。就像上面的回答一样。

我做了简单的数组转换，它允许我转换条目的路径。

const entries = [
    "admin/ts/form.ts",
    "path/to/some/file.ts"
].reduce((acc, path) => {
    const key =
        path.split("/")
        .map(part => part === "ts" ? "js" : part)
        .join("/")
        .replace(/.ts|.tsx$/, "")
    return {
        ...acc,
        [key]: "./static_src/" + path
    }
}, {})

console.log(entries)

现在在你的 webpack 配置中你可以：

module.exports = {
    mode: 'production',
    entry: entries,
    output:{
        path: path.resolve(__dirname, 'static_compiled'),
        filename: "[name].js"
    },
    ...
}

Webpack 4-保留捆绑包的文件夹结构

2 个答案: