使用 vue 的 webpack 模版开发 spa 项目时，我们习惯使用 npm install 安装各种组件和依赖到本地，但引入的组件越来越多，打包时可能会导致 app.js 过大的问题，对加载很不友好。
准确的说，vue/webpack 其实是一个 webpack 工程，怎么将 cdn 资源引入到项目中是对 webpack 进行相关配置。
webpack 配置项 externals
官方说明文档：https://webpack.docschina.org...
module.exports = {
module: {
...
},
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'alias': 'ObjName'
},
....
}vue/webpack 在 build/webpack.base.conf.js 中配置即可
简单的配置如上，alias 是项目内使用时的组件名称，ObjName 是某外部组件对外暴露的名称。
比如 vue 的 window 全局名称是 Vue
比如 vue-router的 window 全局名称是 VueRouter
比如 jquery 的 window 全局名称是 Jquery
在项目 js 中引入
# webpack 会检测这些组件是否在 externals 中注册
# 如果注册则不会将其打包到 app.js 中
import Vue from 'vue'
import VueRouter from 'vue-router'
import $ from 'jquery'这样配置的话 webpack 在 dev 运行或 build 打包时，就不会去本地组件包中查找这些在 externals 中注册的组件了（自然也不会将他们打包到一个 app.js 中去），而是会去 window 域下直接调用 Vue, VueRouter, $ 等对象。
在模版文件中引入 cdn
index.html 模版配置如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<!-- 正常的引入 cdn 资源即可 -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- built files will be auto injected -->
</body>
</html>webpack 配置项 resovle.alias
这个也是比较好用的配置项之一，我们可以优雅的给各个资源目录起一个简约的别名，在项目中引用资源时都很方便。
js 中
import Index from '@/components/Index'
import 'assets/css/common.css'
import 'static/css/common.css'vue 模版中
<style scoped>
div {
background-image: url('~assets/img/bg.png')
}
</style>方便灵活
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。