在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',//根目录下的文件与生成文件进行关联
filename:'index-[hash].html',//指定文件名
inject:'head'//放在哪个标签内
})
] //生成的打包js与html相关联
}在wyq.config.js文件夹下
文件目录结构
WechatIMG3552.jpeg
在new htmlWebpackPlugin()中可以自定义参数
plugins: [
new htmlWebpackPlugin({
template:'index.html',
filename:'index-[hash].html',//指定文件名
inject:'head',//放在哪个标签内
title:'webpack is good',
data:new Date()
})
] //生成的打包js与html相关联
在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进行统一修改呢??
output: {
path: '../dist',//指定路径
filename: './js/[name]-[chunkhash].js',//文件名
publicPath: 'http://cdn.com/' //js文件前面自动拼接好这个绝对的路径了
},//打包文件存放处
结果
http://cdn.com/./js/max-4b483b970351f675ce50.js
接下来如何压缩html页面呢??
plugins: [
new htmlWebpackPlugin({
minify: {
removeComments: true, //删除注释
collapseWhitespace: true //删除空格
}
})
] //生成的打包js与html相关联
运行一下 npm run webpack 搞定了
网友评论