用webpack打包项目的时候,一般喜欢把一些公用的库打包的vendor.js里面,比如像react,react-router,redux等。

随着引入的库越来越多,vendor文件也变得越来越大,于是考虑打包成两个vendor,把和react相关的库打包成一个vendor,其他的库打包成另外一个vendor。按照webpack的文档开始配置,需要注意有两个比较坑的地方。
参考配置:

...
entry: {
"vendor1": ["react", "react-dom", "react-router", "react-router-redux", "react-redux", "redux"],
"vendor2": ["crypto-js", "fastclick"],
"app": "./js/index.js"
},
...
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ["vendor2","vendor1"],
minChunks: Infinity
})
],
...
第一个要注意的地方,在CommonsChunkPlugin里面,vender的顺序要反着来,总之,要和加载顺序相反。比如你想按vendor1,vendor2的顺序加载,entry里面写的是vendor1,vendor2,在CommonsChunkPlugin里面要写vendor2,vendor1。
 
第二个要注意的地方,output.filename一定不要写死了,要配置成可替换的,类似filename: '[name].js'形式。
 
 
参考链接:

webpack打包生成多个vendor的配置方法的更多相关文章

  1. vue-cli+webpack在生成的项目中使用bootstrap方法(二)

    vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多. 当然是可以更省力些,可以通过 ...

  2. vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)

    1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...

  3. vue-cli+webpack在生成的项目中使用bootstrap方法(一)

    在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一 ...

  4. webpack 打包生成的index 路径引用不对

    webpack 在打包时在访问打包里面的index时,出现路径错误 修改方法为 解决方法:在config下面的index.js把 assetsPublicPath: '/', 修改为: assetsP ...

  5. Webpack实战(一):Webpack打包工具安装及参数配置

    为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会 ...

  6. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

  7. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  8. [整理] webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用 https://www.cnblogs.com/moqiutao/p/7496718.html

  9. webpack打包配置禁止html标签全部转为小写

    用webpack打包页面,发现html中特别写的用来给后端识别的大写标签全部被转为了小写标签,这时候需要将加一个配置 ,caseSensitive:true ,禁止大小写转换. webpack配置: ...

随机推荐

  1. HTML5 accesskey的用法

    <button onclick="start()" accesskey="s">开始</button> <button oncli ...

  2. 关于Mysql的高级查询的操作

    前言:作为一名后端的程序员操作数据库的能力是我们基本的技能,而连表查询是我们的这个技能的关键点所在.注意这里顾明思义是对数据的查询的操作 (一).联合查询(关键字union/union all) 什么 ...

  3. HDU 1036(平均速度 **)

    题意是求出跑了 n 圈每圈 m km 的个人的平均速度. 控制格式,特别注意,题意是输出 -:--:-- 的该人成绩作废,但要把他其他的成绩输进去,不能直接就 break ,输出也就只有一个 - ,而 ...

  4. C语言宏定义##连接符和#符的使用

    1. 关于宏(Macro) 属于编译器预处理的范畴,属于编译器概念(而非运行期概念). 2. 关于# #的功能:是 将其后面的宏参数进行 字符串化操作(Stringfication),即:在对它所引用 ...

  5. vue-cli脚手架笔记

    vue不支持IE8,因为vue使用了IE8无法模拟的 ECMAScript 5特性 使用vue-cli脚手架会让我们的工作非常方便 比如想编译一下es6的语法就使用 babel loader 和 ba ...

  6. 关于REST API设计的文章整理

    1. rest api uri设计的7个准则(1)uri末尾不需要出现斜杠/(2)在uri中使用斜杠/表达层级关系(3)在uri中可以使用连接符-提升可读性(4)在uri中不允许出现下划线字符_(5) ...

  7. vue.cli 中使用 less 来写css样式

    vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...

  8. 【D3D】Directx12运行报错&win10无法添加【图形工具】

    “我欢欣雀跃地打开<3D programming with Directx12>,准备接受D3D的洗礼,然后就卡在了 chapter 0 .”——Liez 100%纯小白的chapter ...

  9. MySQL图形化管理工具

    PHPMyAdmin(关于web界面的) Navicat MySQL Workbench

  10. ELK平台搭建(下)

    1. 目的 为指导在Centos6.8系统下搭建标准ELK平台的工作,特编写本施工文档. 2. 定义 Elasticsearch Logstash Kibana结合Redis协同工作. 3. 适用范围 ...