1、在webpack.base.conf.js中配置
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'vue': 'Vue',
"element-ui": "ELEMENT",
"vue-router": "VueRouter",
"vuex": "Vuex",
"qs": "qs",
"axios": "axios",
"jquery": "$",
},
// 这里需要将vue和vue-router公开出去，供全局使用，这里小写的(即冒号左边的)vue和vue-router是我们引入资源时对应的名字，冒号右面的是由库的主人暴露出来的全局方法名
output: {}
2、在index.html中body元素中通过CDN添加相应的js文件(CDN地址：https://www.bootcdn.cn/)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css"> -->
<link href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<!-- <script src="https://unpkg.com/[email protected]/lib/index.js"></script> -->
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
3、移除import引入，例如import Vue from 'vue'，直接移除就行通过webpack之externals配置减少打包vendor体积
猜你喜欢
转载自blog.csdn.net/przlovecsdn/article/details/81509743
今日推荐
周排行