[英]how to inject css bundle in head and js bundle in body using webpack html plugin
[英]How to bundle js in html with webpack?
我將我的項目與 webpack 捆綁在一起。 我想在兩個單獨的 html 文件中捆綁兩次 javascript 文件。 如何做到這一點?
我的文件夾結構如下
dist
|- index1.html
|- index2.html
|- js
|- index1.bundle.js
|- index2.bundle.js
webpack.config.js
這是 webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/js/index.js',
index2: './src/js/index2.js'
},
output: {
filename: './js/[name].bundle.js'
},
watch: true,
plugins: [
new HtmlWebpackPlugin({
hash: true,
template: './src/index.html',
filename: './index.html'
}),
new HtmlWebpackPlugin({
hash: true,
template: './src/index2.html',
filename: './index2.html'
})
]
};
如何將同一個文件捆綁在兩個單獨的 html 文件中?
已經想通了。 我所要做的就是分塊。
我不得不添加
chunk: ['index'] 用於第一個 htmlwebpackplugin 和
chunk: ['index2'] 用於第二個 htmlwebpackplugin
更新了 webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/js/index.js',
index2: './src/js/index2.js'
},
output: {
filename: './js/[name].bundle.js'
},
watch: true,
plugins: [
new HtmlWebpackPlugin({
hash: true,
template: './src/index.html',
filename: './index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
hash: true,
template: './src/index2.html',
filename: './index2.html',
chunks: ['index2']
})
]
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.