二、webpack的基本配置(2)
来源:互联网 发布:2017天猫数据直播 编辑:程序博客网 时间:2024/06/15 14:24
http://blog.csdn.net/xyphf/article/details/62497706
我们在之看到过
我们之前提到过entry参数是整个项目打包的一个入口指示,可以传一个对象,那么对象里面的属性代表着它的一个entry,可以用这个处理项目中经常遇到的多页面应用。之前我们说到的都是但也面应用,那么现在我们来处理一下多页面应用。
http://webpack.github.io/docs/configuration.html
entry为了应对复杂的项目需求,它有三中输入方式。
第一种:string;指定一个入口文件,所有的依赖都在入口文件中指定
第二种:传入一个数组,这种是想解决两个平行的互相依赖的却想打包在一起的这种情况
如:
entry: ["./entry1", "./entry2"]
第三种:是传入一个对象,key表示chunk name,value表示它真实的entry;这个时候它的entry遵循的规则是和上面一致的。既可以是一个string也可以是一个数组。是string就表示单个的路径,是数组的时候就表示多个路径;
使用场景:在多页面应用程序中,我们会用到这种方式。
如:
{ entry: { page1: "./page1", page2: ["./entry1", "./entry2"] }, output: { // Make sure to use [name] or [id] in output.filename // when using multiple entry points filename: "[name].bundle.js", chunkFilename: "[id].bundle.js" }}
根据这个配置一和配置二我们给他命名了不同的chunk;
我们在看看output的参数,我们用到两个最基础的参数filename和path;不要在filename中指定它的绝对路径,因为path会真正的去指定它的路径。不然的话,会导致项目的混乱。
filename是被每一个单独的文件使用的;
假如entry定的是一个字符串路径,即但输入法,filename:’bundle.js’是一个写死的名称,那么它生成的文件就是bundle.js;因为它只生成了一个文件。
但是如果你输入的是多输入,比如说是一个对象,这个时候key和value会有多对,相当于有多个chunk;这个时候你的filename在是一个写死的字符串,那么他们之间就会被覆盖,只会生成一个文件。
那么怎么解决呢?
如果你创建的chunk是多于一个的,那么你就可以使用一些占位符来保证你输出的文件名是唯一的,那么就不会被相互覆盖了。占位符有三种,
第一种:[name] ,表示chunk的name,也就是前面的key;第二种:[hash],表示这次打包的一个hash第三种:[chunkhash],表示每一个chunk自己的hash值
如:
filename:'[name]-[chunkhash].js'
- 二、webpack的基本配置(2)
- 二、webpack的基本配置(1)
- webpack的基本配置
- webpack-2-基本配置
- webpack(二)配置
- webpack的基本使用(二)
- webpack react的基本配置
- webpack的基本配置项详解
- React+webpack 的开发环境配置步骤(二)
- webpack基本配置
- webpack基本配置
- webpack基本配置
- webpack基本配置
- 傻瓜式学习webpack(二)——配置webpack
- webpack的配置(一)
- webpack安装与基本配置
- webpack基本配置项总结
- webpack基本打包配置流程
- 关于c++ vector capacity、max_size、size、sizeof的区别
- context:component-scan标签的use-default-filters属性的作用以
- C语言的隐式声明
- 说说单片机里的时钟源
- 关于 IDLE 上发生 UnicodeDecodeError 问题的解决办法
- 二、webpack的基本配置(2)
- “无法将虚拟机更改为选定的监视器布局”解决方法
- JavaScript拖拽封装
- 内存变量布局
- mysql C++ wrapper
- LeetCode #7 Reverse Integer
- mysql的c++封装类
- 循环链表
- Hive2.1.1安装