在src文件夾下
npm install html-webpack-plugin --save-dev
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {max: './script/max.js',wyq:'./script/wyq.js'},//入口文件
output: {
path: '../dist',//指定路徑
filename: './js/[name]-[chunkhash].js'//文件名
},//打包文件存放處
plugins: [
new htmlWebpackPlugin({
template:'index.html',//根目錄下的文件與生成文件進行關(guān)聯(lián)
filename:'index-[hash].html',//指定文件名
inject:'head'//放在哪個標簽內(nèi)
})
] //生成的打包js與html相關(guān)聯(lián)
}在wyq.config.js文件夾下
文件目錄結(jié)構(gòu)
WechatIMG3552.jpeg
在new htmlWebpackPlugin()中可以自定義參數(shù)
plugins: [
new htmlWebpackPlugin({
template:'index.html',
filename:'index-[hash].html',//指定文件名
inject:'head',//放在哪個標簽內(nèi)
title:'webpack is good',
data:new Date()
})
] //生成的打包js與html相關(guān)聯(lián)
在index.html中
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<script src="bundle.js"></script>
<body>
<%= htmlWebpackPlugin.options.data %>
</body>
之后npm run webpack 就搞定啦
接下來對htmlWebpackPlugin.options 和 files進行遍歷
<% for(var key in htmlWebpackPlugin.files) { %>
<%= key %>: <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>
/////
<% for(var key in htmlWebpackPlugin.options) { %>
<%= key %>: <%= JSON.stringify(htmlWebpackPlugin.options[key]) %>
<% } %>
在上線的情況下如何對js進行統(tǒng)一修改呢??
output: {
path: '../dist',//指定路徑
filename: './js/[name]-[chunkhash].js',//文件名
publicPath: 'http://cdn.com/' //js文件前面自動拼接好這個絕對的路徑了
},//打包文件存放處
結(jié)果
http://cdn.com/./js/max-4b483b970351f675ce50.js
接下來如何壓縮html頁面呢??
plugins: [
new htmlWebpackPlugin({
minify: {
removeComments: true, //刪除注釋
collapseWhitespace: true //刪除空格
}
})
] //生成的打包js與html相關(guān)聯(lián)
運行一下 npm run webpack 搞定了
