webpack学习（入口entry）

入口entry

概念：

在一切流程的最开始，我们需要指定一个或多个入口（entry），也就是告诉Webpack具体从源码目录下的哪个文件开始打包。

如果把工程中各个模块的依赖关系当作一棵树，那么入口就是这棵依赖树的根。

这些存在依赖关系的模块会在打包时被封装为一个chunk。那chunk是什么呢？

chunk字面的意思是代码块，在Webpack中可以理解成被抽象和包装过后的一些模块。它就像一个装着很多文件的文件袋，里面的文件就是各个模块，Webpack在外面加了一层包裹，从而形成了

根据具体配置不同，一个工程打包时可能会产生一个或多个chunk。

工程中可以定义多个入口，每一个入口都会产生一个结果资源

比如我们工程中有两个入口src/index.js和src/lib.js，在一般情形下会打包生成dist/index.js和dist/lib.js。

写法：

1、简写语法

module.exports = { entry: './main.js' };

上面的入口配置写法其实是下面的简写

module.exports = {
  entry: {
    main: './main.js'
  }
};

 

2、数组语法

module.exports = {
  entry: {
    main:['./main.js','./main2.js']
  }
};

传入一个数组的作用是将多个资源预先合并，在打包时Webpack会将数组中的最后一个元素作为实际的入口路径，在使用字符串或数组定义单入口时，并没有办法更改chunk name，只能为默认的“main”。

3.对象语法

module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

这会比较繁琐。然而这是应用程序中定义入口的最可扩展的方式。

4、多页应用

对于多页应用的场景，为了尽可能减小资源的体积，我们希望每个页面都只加载各自必要的逻辑，而不是将所有页面打包到同一个bundle中。因此每个页面都需要有一个独立的bundle，这种情形我们使用多入口来实现。请看下面的例子：

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

上面的配置告诉webpack 需要 3 个独立分离的依赖图，此时入口与页面是一一对应的，这样每个HTML只要引入各自的JS就可以加载其所需要的模块