动态生成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一样
bunld
关键在于
new HtmlWebpackPlugin({
filename:'./view/index.html',
template:'./src/view/index.html',
chunks: ['index'],
inject:'true',
hasg:'true',
minify:{
removeComments:false,
collapseWhitespace:false
}
}),
new HtmlWebpackPlugin({
filename:'./view/list.html',
template:'./src/view/list.html',
chunks: ['list'],
inject:'true',
hasg:'true',
minify:{
removeComments:false,
collapseWhitespace:false
}
})
在 HtmlWebpackPlugin
分别加chunks:[index.js]
chunks:[list.js]