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

Chad 发表于 Dev

乍得

我具有以下文件夹结构：

/index.html
/app/index.tsx

与webpack捆绑后，我想将下面的ouput目录与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应该这样做。我究竟做错了什么？

詹蒂蒙

这类似于WebpackHtmlPlugin问题＃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"
    }),
  ],
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。