在webpack中活用cdn可以大幅度减少打包文件的体积,配置方法也非常简单。

首先现在入口html文件(index.html)里引入相应cdn连接,然后配置webpack:

module.exports = {
externals: {
"vue": "Vue"
},
...
}

配置cdn主要利用了externals(外部的)选项,key表示的是包名,即package.json中包的名称,value表示的是包导出的类名。比如说vue包导出的类名是Vue,vue-router导出的类名是VueRouter。类名很重要,不能乱写,不然就会报找不到变量的错。

想知道导出的类名可以先在一个空白的html文件里引入cdn文件,然后打开控制台,输入包名的头几个字母,出现的智能提示就是类名。

比如vuex的类名就是Vuex,由于vuex比较小,这里就直接复制粘贴到控制台作为演示了

关于webpack的cdn配置的更多相关文章

  1. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  2. vue预渲染及其cdn配置

    VUE SEO方案一 - 预渲染及其cdn配置 项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE ...

  3. webpack + vuejs 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  4. webpack react基础配置一

    简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs  npm便自动集成了,通过npm安装其 ...

  5. webpack 多entry 配置

    // webpack 多entry 配置var path = require('path'); module.exports = { entry: { entry2: './entry.js', de ...

  6. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  7. webpack的简单配置

    本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...

  8. Webpack 2 视频教程 019 - Webpack 2 中配置多页面编译

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  9. Webpack的基本配置

    一.优化项目结构,创建相关的文件,项目结构如下:src文件夹存放相关js文件,index.html项目的首页面,dist文件夹是webpack 打包 目录. index.js内容为: alert('我 ...

随机推荐

  1. Http状态码(了解)

    一些常见的http状态码 200 - OK,服务器成功返回网页     - Standard response for successful HTTP requests. 301 - Moved Pe ...

  2. PowerShell批量配置VM端点

    我们可以通过PowerShell脚本批量添加VM端点.请您参考以下方案. 准备工作 – PowerShell连接China Azure 1. 从官网下载页面,下载并安装Windows Azure Po ...

  3. day09 threading, paramiko, queue 模块

    1 模拟ssh 2 锁 内部锁,程序锁,信号量 3 多线程 4  简单消息队列 先来看模拟ssh  ,python 的强大之处就是因为有很多模块,可以很简单的完成复杂的事情,今天我们用paramiko ...

  4. python-os模块及md5加密

    常用内置方法 __doc__打印注释 __package__打印所在包 __cached__打印字节码 __name__当前为主模块是__name__ == __main__ __file__打印文件 ...

  5. LeetCode118 杨辉三角 Python

    给定一个非负整数 numRows,生成杨辉三角的前 numRows 行. 示例:输入: 5 输出: [ [1], [1,1], [1,2,1], [1,3,3,1], [1,4,6,4,1] ] cl ...

  6. 关于在smarty中实现省市区三级联动

    刚开始接触php,,其实对于一些比较深入的东西还不是很了解,就像是这次的省市区联动,都是用三张表为基础编码的,原谅我的无知,谢谢. 接下来就是编码部分了: <?php require('./sm ...

  7. WS-*协议栈及相关概念

    1. 什么是WS-Security? WS-Security 是一个 SOAP 的扩展,它提供了对 SOAP 消息的认证和加密. 在介绍 WS-Security 之前,我们有必要了解一下 WS-Sec ...

  8. Apache+Openssl

    Apache编译还需要一些依赖: #./configure --prefix……检查编辑环境时出现: checking for APR... no configure: error: APR not ...

  9. windows杀死进程netstat

    1.找到端口被占用情况 netstat -aon|findstr "9050" 协议    本地地址                     外部地址               ...

  10. Linux调用fork()编程

    本文出自:svitter's blog #include <iostream> #include <cstdio> #include <unistd.h> usin ...