用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. Elastic Stack之ElasticSearch分布式集群yum方式搭建

    Elastic Stack之ElasticSearch分布式集群yum方式搭建 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.搜索引擎及Lucene基本概念 1>.什么 ...

  2. SearchServer Elasticsearch Cluster / kibana

    S 使用nginx代理kibana并设置身份验证 https://blog.csdn.net/wyl9527/article/details/72598112 使用nginx代理kibana并设置身份 ...

  3. linux下生成00 01 02..99的这些数

    [root@localhost ~]# seq -s " " -w 9901 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 ...

  4. python遇到的知识点

    python遇到的知识点,记录一下.方便学习. 文件相关操作 查了资料,关于open()的mode参数: 'r':读 'w':写 'a':追加 'r+' == r+w(可读可写,文件若不存在就报错(I ...

  5. 各种loading加载中gif图标

    点击这里打包下载更多样式

  6. elementUi模态框使用baiduMap错误记录

    报错如下,可能是因为目标div还没生成 elementUi文档说明 在dom生成后再调用,正常 buildMap(){ let map = new BMap.Map("allmap" ...

  7. 细说shiro之二:组件架构

    官网:https://shiro.apache.org/ Shiro主要组件包括:Subject,SecurityManager,Authenticator,Authorizer,SessionMan ...

  8. spring注解第02课 包扫描@ComponentScan、@ComponentScans

    1.配置文件形式: <context:component-scan base-package="com.atguigu" /> spring会扫描此包下的@Servic ...

  9. DevExpress Winform 常用控件

    Ø  前言 DevExpress 控件的功能比较强大,是全球知名控件开发公司,对于开发 B/S 或 C/S 都非常出色,可以实现很炫且功能强大的效果. DevExpress Winform 常用控件是 ...

  10. dll和lib的关系(转)

    转自http://blog.163.com/zhengjiu_520/blog/static/3559830620093583438464/ 前面有一章说编译与链接的,说得很简略,其实应该放到这一章一 ...