我具有以下文件夹结构：
/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应该这样做。我究竟做错了什么？
来自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] 删除。
我来说两句