[英]How to automatically include NPM “dependencies” into index.html through <script> tags in VUE JS WEBPACK project?
[英]WebPack repeatedly injects redundant script tags into index.html on load
学习 WebPack 并设置它以从模板创建 index.html 并注入带有包含唯一内容 hash 的捆绑文件的<script>
标记,并确保已加载新内容,例如:绕过浏览器缓存bundle-[contentHash].js
。
我正在使用json-server
并运行webpack -d -w
作为 NPM 的脚本。 当我运行脚本并加载页面时,它会不断地将相同的<script>
标签添加到 index.html 文件中。
webpack.config.js:
const webpack = require("webpack")
const path = require("path")
var htmlPlugin = require("html-webpack-plugin")
module.exports = {
// context: path.resolve(__dirname),
entry: "./client/index.jsx",
output: {
path: path.join(__dirname, "/public"),
publicPath: path.join(__dirname, "/public"),
filename: "bundle-[contentHash].js"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new htmlPlugin({
template: "./public/index.html"
})
]
}
重复的<script>
标签注入是由于模板的名称(index.html)与html-webpack-plugin
的默认 output 的名称相同。
将我的模板从index.html
重命名为template.html
解决了这个问题。
plugins: [
new htmlPlugin({
template: "./public/template.html"
})
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.