webpack打包后引用cdn的js_webpack使用HtmlWebpackPlugin进行cdn配置

CDN服务商的选择

在前面的文章中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如：

其中BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，项目资源同步于 cdnjs 仓库。界面相对比较好看，且支持搜索功能，可以在线测试cdn是否正常，所以下面以Bootcdn为例说明。

webpack的作用

在前段项目开发中，我们经常使用webpack进行项目搭建， 主要作用有两个，分别是

启动服务器环境，用于调试代码

构建项目，生成静态资源

webpack

在webpack中使用cdn是在打包生成静态资源的时候做处理，主要原理是使用html-webpack-plugin动态插入cdn链接。

关于webpack的使用这里不做过多的介绍，将以vue--cli 2.x生成的默认项目为例做介绍

html-webpack-plugin的使用

html-webpack-plugin是webpack的一个插件，可以动态的创建和编辑html内容，在html中使用esj语法可以读取到配置中的参数，简化了html文件的构建。

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.

我们这次主要是使用它来动态插入cdn链接，如link标签和script标签。

创建Vue项目

vue-cli 2.x

$ vue init webpack webpack-cdn-demo

创建名为webpack-cdn-demo，类型为webpack的vue项目，如果安装的vue-cli是3.x版本，命令不太一样，详细可看vue-cli 3。

安装依赖

$ cd webpack-cdn-demo

$ npm install

启动项目

$ npm run dev

下面简单介绍一下目录结构

+-- build

| +-- utils.js js 工具类

| +-- webpack.base.conf.js webpack基础配置

| +-- webpack.dev.conf.js webpack开发配置

| +-- webpack.prod.conf.js webpack构建配置

+-- config

+--