用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. MySQL的复制机制

    MySQL的复制机制 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL复制介绍 1>.MySQL复制允许将主实例(master)上的数据同步到一个或多个从实例( ...

  2. python第二次周末大作业

    题目 ''' HR人力资源管理. 1. 菜单: ("查看员⼯信息","添加员⼯信息", "修改员⼯信息", "删除员⼯信息&quo ...

  3. Kafka技术内幕 读书笔记之(六) 存储层——日志的读写

    -Kafka是一个分布式的( distributed ).分区的( partitioned ).复制的( replicated )提交日志( commitlog )服务 . “分布式”是所有分布式系统 ...

  4. Hadoop记录-Hadoop集群添加节点和删除节点

    1.添加节点 A:新节点中添加账户,设置无密码登陆 B:Name节点中设置到新节点的无密码登陆 C:在Name节点slaves文件中添加新节点 D:在所有节点/etc/hosts文件中增加新节点(所有 ...

  5. HDU 6362(求椭圆中矩形周长的期望 数学)

    题意是给定一个椭圆标准方程的a,b(椭圆的长半轴长和短半轴长),在[0,b]内取一个数,则过点(0,b)且平行于x轴的直线与椭圆交于两点,再将此两点关于x轴做对称点,顺次连接此四点构成矩形,求出这些矩 ...

  6. python中\r的意义及用法

    \r的意义 \r 表示将光标的位置回退到本行的开头位置 \b表示将光标的位置回退一位 在python里print会默认进行换行,可以通过修改参数让其不换行 (1) python2中可以在print语句 ...

  7. Word设置多级标题

    选中标题1的内容,点击编号图标,选中一个经典的编号模板,如下图 之后,再次点击编号图标,然后选中“定义新的多级列表”,将打开一个对话框 确保标题1的标号正确: 接着,确保标题2的编号正确: 依次类推, ...

  8. Spring boot 连接Redis实现HMSET操作

    这篇文章记录使用spring-boot-starter-redis访问Redis.Redis相关的的配置文件放在Resources目录下的application.yml文件中,如下所示: spring ...

  9. springboot(二十一):SpringBoot使用Mybatis注解开发教程-分页-动态sql

    https://blog.csdn.net/KingBoyWorld/article/details/78948304

  10. MVC数据库连接

    创建数据库 创建表 来源:http://blog.csdn.net/tkdwave520/article/details/44629903 <pre  name = “code”  class ...