javascript - HtmlWebpackPlugin生成html问题，怎么对应js文件，而不是全引入
本文介绍了javascript - HtmlWebpackPlugin生成html问题，怎么对应js文件，而不是全引入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
动态生成html，我有两个html模板，index.html跟list.html，我想分别对应index.js跟list.js
但是生成index.html和list.html的时候把两个js都引入了
请问怎么才能分开对应引用，还是我的思路不对？
配置文件entry 2个js,HtmlWebpackPlugin new了两次生成2个html
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer:{
contentBase:'./dist/view'
},
entry:{
index:'./src/js/index.js',
list:'./src/js/list.js'
},
output:{
path:path.join(__dirname,'dist'),
publicPath: "/Capella/dist/",
filename:'js/[name].js'
},
module:{
loaders:[
{test:/\.css$/,loader:'style!css'},
{test:/\.js$/,exclude:'/node_modules/',loader:'babel-loader'}
]
},
plugins:[
new webpack.ProvidePlugin({
_:"lodash",
$:"jQuery"
}),
new HtmlWebpackPlugin({
filename:'./view/index.html',
template:'./src/view/index.html',
inject:'true',
hasg:'true',
minify:{
removeComments:false,
collapseWhitespace:false
}
}),
new HtmlWebpackPlugin({
filename:'./view/list.html',
template:'./src/view/list.html',
inject:'true',
hasg:'true',
minify:{
removeComments:false,
collapseWhitespace:false
}
}),
// new webpack.optimize.UglifyJsPlugin({
// compass:{
// warnings:false
// },
// except: ['$super', '$', 'exports', 'require']
// })
]
}生成后的list.html index.html的script引入跟list一样
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>bunld</title>
</head>
<body>
<header>
<nav><a href="./index.html" id="showme">index</a></nav>
</header>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>cccc</li>
</ul>
<script type="text/javascript" src="/Capella/dist/js/list.js"></script><script type="text/javascript" src="/Capella/dist/js/index.js"></script></body>
</html>
解决方案
在 HtmlWebpackPlugin分别加chunks:[index.js]chunks:[list.js]
这篇关于javascript - HtmlWebpackPlugin生成html问题，怎么对应js文件，而不是全引入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
