使用 webpack 在输出目录中保留文件夹结构答案

【问题标题】：Preserving folder structure in output directory with webpack使用 webpack 在输出目录中保留文件夹结构
【发布时间】：2016-03-21 04:06:52
【问题描述】：

我有以下文件夹结构：

/index.html
/app/index.tsx

与 webpack 捆绑后，我希望将以下输出目录与 bundle.js 注入 index.html

/dist/index.html
/dist/app/bundle.js
/dist/app/bundle.js.map

我有以下 webpack 配置

var webpack = require("webpack")
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = [
    {
        entry: "./app/index",
        output: {
            path: "./dist/app",
            filename: "bundle.js"
        },
        devtool: "source-map",
        resolve: {
            extensions: ["", ".tsx", ".ts", ".js"]
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin(),
            new HtmlWebpackPlugin({
                "filename": "./index.html",
                "template": "html!./index.html"
            })
        ],
        module: {
            loaders: [
            { test: /\.tsx?$/, loader: "ts-loader" },
            ]
        }
    }, 
    {
        output: {
            path: "./dist",
            filename: "bundle.js"
        },
        plugins: [
            new HtmlWebpackPlugin({
                "filename": "./index.html",
                "template": "html!./index.html"
            })
        ]    
    }
]

它似乎工作正常，但脚本 bundle.js 没有按预期注入到 index.html 中。 HtmlWebpackPlugin 应该这样做。我做错了什么？

【问题讨论】：

您的./index.html 是否包含HtmlWebpackPlugin 期望在其基本模板中的模板？否则它不会编写脚本部分。
是的。我可以重写注入脚本但文件夹结构未保留的配置
如果你不使用 webpack-dev-server 你可以在这里找到答案：stackoverflow.com/questions/36106276/…

标签： javascript webpack

【解决方案1】：

这类似于WebpackHtmlPlugin issue #234。

来自https://github.com/webpack/docs/wiki/configuration#outputpublicpath

output.publicPath publicPath 指定公共 URL 地址在浏览器中引用时的输出文件。

您可以做的是在输出文件名中添加'app' 文件夹名称：

module.exports = {
  output: {
    filename: "app/[name]-[hash].js",
    path: "dist",
    publicPath: ""
  },
  plugins: [
    new HtmlWebpackPlugin({
       "template": "html!./index.html"
    }),
  ],
}

【讨论】：

就是这样。我不知道如何措辞这个问题。谢谢！