![](/img/trans.png)
[英]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.