Erhaltung Ordnerstruktur im Ausgabeverzeichnis mit webpack

Question

Ich habe die folgende Ordnerstruktur:

/index.html 
/app/index.tsx 

mit webpack Nach Bündeln, ich möchte folgende ouput Verzeichnis mit den bundle.js in die index.html injiziert haben,

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

ich habe folgende webpack Konfiguration

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" 
      }) 
     ]  
    } 
] 

Es scheint zu funktionieren, aber das Skript bundle.js wird nicht wie erwartet in die index.html injiziert. Das HtmlWebpackPlugin soll dies tun. Was mache ich falsch?

Answer 1

Dies ist ähnlich WebpackHtmlPlugin issue #234.

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

output.publicPath Die publicPath geben die öffentliche URL-Adresse der die Ausgabedateien, wenn sie in einem Browser verwiesen.

Was Sie tun können, ist die 'app' Ordnernamen der Ausgabedatei hinzuzufügen:

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