使用webpack保留输出目录中的文件夹结构 [英] Preserving folder structure in output directory with webpack
问题描述
我有以下文件夹结构:
/index.html
/app/index.tsx
捆绑webpack之后,我希望将以下的输出目录与bundle.js一起注入索引.html
After bundling with webpack, I would like to have the following ouput directory with the bundle.js injected into the index.html
/dist/index.html
/dist/app/bundle.js
/dist/app/bundle.js.map
我有以下webpack配置
I have the following webpack configuration
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应该这样做。我做错了什么?
It seems to work fine, but the script bundle.js is not injected into the index.html as expected. The HtmlWebpackPlugin is supposed to do this. What am I doing wrong?
推荐答案
这类似于 WebpackHtmlPlugin问题#234 。
来自 https://github.com/webpack/docs/wiki/configuration#outputpublicpath
output.publicPath
在浏览器中引用时,publicPath指定输出文件的
的公共URL地址。
output.publicPath
The publicPath specifies the public URL address of the output files when referenced in a browser.
您可以做的是添加'app'
文件夹名称到输出文件名:
What you can do is to add the 'app'
folder name to the output filename:
module.exports = {
output: {
filename: "app/[name]-[hash].js",
path: "dist",
publicPath: ""
},
plugins: [
new HtmlWebpackPlugin({
"template": "html!./index.html"
}),
],
}
这篇关于使用webpack保留输出目录中的文件夹结构的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!