Webpack 4 - 为包保留文件夹结构答案

【问题标题】：Webpack 4 - Preserve folder structure for bundlesWebpack 4 - 为包保留文件夹结构
【发布时间】：2019-06-20 11:48:19
【问题描述】：

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

我尝试使用 [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] 占位符来标识文件，但最后我将其删除。

【问题讨论】：

标签： webpack webpack-4 webpack.config.js

【解决方案1】：

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

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

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

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"
    },
    ...
}

【讨论】：

谢谢！当我不想捆绑并保留文件夹结构时，这对我有很大帮助。

【解决方案2】：

如果您将入口块的 name 更改为输出目录中的路径，您希望在输出时看到该路径，那么您就可以解决问题。

例如，如果您将博客条目重命名为blog/blog，如下所示，当 webpack 生成捆绑包并将其输出到输出目录时，由于文件名为blog/blog，因此结果将为dist/blog/blog.[contenthash].js。另一个文件仍然是main.[contenthash].js。

这应该对你有用：

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

【讨论】：