webpack打包定义版本号、引入cdn

置顶随遇而安、1314

已于 2022-03-30 20:14:14 修改

阅读量1.7k

点赞数 1

于 2022-03-30 10:15:30 首次发布

本文链接：https://blog.csdn.net/LonewoIf/article/details/123839287

版权

vue 同时被 3 个专栏收录

27 篇文章 1 订阅

订阅专栏

JavaScript

24 篇文章 2 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

1、引入html-webpack-plugin，html-webpack-plugin详解参考：https://www.cnblogs.com/wonyun/p/6030090.html

npm install --save-dev html-webpack-plugin

2、在webpack.prod.conf.js的plugin中新增配置
在这里插入图片描述

const date = new Date();

const timestamp = date.getTime(); // 时间戳

在这里插入图片描述

new HtmlWebpackPlugin({
	filename: config.build.index,
	template: 'index.html',
	inject: true,
	time: moment(date).format('YYYY-MM-DD HH:mm:ss.SSS'),
	timestamp: timestamp,
	favicon: resolve('icon.ico'), // 图标
	title: 'xxxx公司', // 标题
	minify: {
		removeComments: true, // 打包后删除注释
		collapseWhitespace: true, // 打包后删除空格
		removeEmptyAttributes: true, // 打包后删除空属性
		removeAttributeQuotes: true // 打包后删除引号
	},
	cdn: {
		css: [
			'/static/icon/iconfont.min.css',
			'/static/lib/css/element-ui/index.min.css',
			'/static/lib/css/buttons/buttons.min.css',
			'/static/lib/css/print-js/print.min.css'
		],
		js: [
			'/static/lib/js/babel-polyfill/browser-polyfill.js'
		]
	}
})

在index.html中使用：
在这里插入图片描述

<!-- require cdn assets css -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel='stylesheet' href='<%= htmlWebpackPlugin.options.cdn.css[i] %>' />
<% } %>
<script src="/static/config/index.js?_t=<%=new Date().valueOf()%>"></script>
<script src="/static/expand/index.js"></script>
<!-- require cdn assets js -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type='text/javascript' src='<%= htmlWebpackPlugin.options.cdn.js[i] %>'></script>
<% } %>