有时候我们不想bundle.js过于大,想把一些库独立成文件单独拿出来

module.exports = {
entry: {
  // bundle是我们要打包的项目文件的导出名字, app是入口js文件
  bundle: 'app',
  // vendor就是我们要打包的第三方库最终生成的文件名,数组里是要打包哪些第三方库, 如果不是在node——modules里面,可以填写库的具体地址
  vendor:['jquery','vue']
},
plugins: {
  // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
  // 打包之后就生成vendor.js文件
  new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
})
}
}

webpack提取库的更多相关文章

  1. webpack提取公共js代码

    webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...

  2. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

  3. webpack 提取css成单独文件

    webpack 提取css成单独文件 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = requir ...

  4. vue-cli、webpack提取第三方库-----DllPlugin、DllReferencePlugin

    需要安装的插件有 extract-text-webpack-plugin assets-webpack-plugin clean-webpack-plugin npm install extract- ...

  5. webpack 插件库

    webpack常用的插件安装命令 webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:np ...

  6. webpack 提取 manifest 文件

    当 webpack 生成 bundle 时, 它同时维护一个 manifest 文件.你可以在生成的 vendor bundle 中找到它.manifest 文件描述了哪些文件需要 webpack 加 ...

  7. 使用 webpack-bundle-analyzer 分析 webpack 代码库拆分块

    github:https://github.com/webpack-contrib/webpack-bundle-analyzer 1.安装: cnpm install webpack-bundle- ...

  8. webpack学习笔记--提取公共代码

    为什么需要提取公共代码 大型网站通常会由多个页面组成,每个页面都是一个独立的单页应用. 但由于所有页面都采用同样的技术栈,以及使用同一套样式代码,这导致这些页面之间有很多相同的代码. 如果每个页面的代 ...

  9. vue-cli3 DllPlugin 提取公用库

    vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间.开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的.如果能把这些库文件提取出来 ...

随机推荐

  1. 详解C#7.0新特性

    1. out 变量(out variables) 以前我们使用out变量必须在使用前进行声明,C# 7.0 给我们提供了一种更简洁的语法 “使用时进行内联声明” .如下所示: 1 var input ...

  2. 【ORACLE】oracle11g RAC搭建

    --安装好操作系统(rhel-server-6.7 on vmware) 注意事项: 1.磁盘配置lvm 2.账号密码 root/oracle ---------------------------- ...

  3. javascript source map 的使用

    之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大意 ...

  4. python3绝对路径,相对路径

    from __future__ import absolute_import的作用: 直观地看就是说”加入绝对引入这个新特性”.说到绝对引入,当然就会想到相对引入.那么什么是相对引入呢?比如说,你的包 ...

  5. yocto-sumo源码解析(三):oe-setup-builddir

    该脚本的主要功能就是创建构建目录并准备一些配置文件,比如conf/local.conf,conf/bblayer.conf 1. 检测BUILDDIR环境变量是否设置好(在本系列分享第二节已经知道:B ...

  6. DRF02

    1. 视图 Django REST framwork 提供的视图的主要作用: 控制序列化器的执行(检验.保存.转换数据) 控制数据库查询的执行 1.1. 请求与响应 1.1.1 Request RES ...

  7. Leetcode题库——40.组合总和II

    @author: ZZQ @software: PyCharm @file: combinationSum2.py @time: 2018/11/15 18:38 要求:给定一个数组 candidat ...

  8. Git 笔记——如何处理分支合并冲突

    1.前言 学习使用 Git 也有一段时间,但一直都是把 Git 当作一个代码仓库,使用的命令无非就是 clone, add, commit ,往往课程作业也没有过多人合作开发,没有体验过 Git 的分 ...

  9. 编写JDBC框架:(策略设计模式)

    package com.itheima.domain; //一般:实体类的字段名和数据库表的字段名保持一致 //约定优于编码 public class Account { private int id ...

  10. WebView 5.0+闪烁以及白屏问题完美解决

    Android webView 在5.0+上启动硬件加速,造成部分手机出现闪烁.白屏等现象 必须写下这篇博客,遇到的问题搞了很久,百度谷歌就是没有完整的答案,记录下来,方便博友们: 需求:一个简单的W ...