二、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'
0 0
原创粉丝点击