[英]How can I build with Babel (while preserving the source's folder structure) with Webpack?
[英]Preserving folder structure in output directory with webpack
我有以下文件夾結構:
/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應該這樣做。 我究竟做錯了什么?
這類似於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"
}),
],
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.