[译]webpack官网文档 ：概念 -- 2.入口点

原创翻译，转载请注明出处。

原文地址：https://webpack.js.org/concepts/entry-points

 

就像我们在介绍里提到的那样，在你的webpack配置文件里有很多方法去定义entry属性。我们将给你展示几种方法，并说明它为什么对你有用。

 

单个的Entry（简写）语法

用法：entry: string | Array<string>

 

webpack.config.js

 

const config ={
  entry:'./path/to/my/entry/file.js'
};
 
module.exports = config;

 

 

这个单个的enry语法是下面的命令的简写：

 

const config ={
  entry:{
    main:'./path/to/my/entry/file.js'
  }
};

 

 

当你想为一个应用或者工具快速设置webpack配置的时候，单个入口点是一个不错的选择。当然，使用这个命令对于扩展或缩减你的配置的时候没有多少灵活性。

 

对象语法

用法：entry:{[entryChunkName: string]: string | Array<string>}

 

webpack.config.js

 

const config ={
  entry:{
    app:'./src/app.js',
    vendors:'./src/vendors.js'
  }
};

 

 

这个对象语法更详细一些。但是这是在你的应用里扩展性最好的entry/entries定义方法。

 

脚本

下面是一组entry配置列表和他们的真实用例：

 

分开App和Vendor入口

webpack.config.js

 

const config ={
  entry:{
    app:'./src/app.js',
    vendors:'./src/vendors.js'
  }
};

 

 

它做了些什么？表面上看它告诉webpack用app.js和vendor.js两个文件作为起始，来创建依赖图。这些依赖图将被完全分开并且不依赖于对方而完全独立（在各自的包里将都会有一个webpack引导程序）。这常见于只有一个入口点（不包括vendors）的单页应用。

为什么要这样？这个设置允许你利用CommonChunkPlugin，从你的app包里提取出所有的vendor参照把它们放入vendor包里，通过调用__webpack_require__()放法来替代他们。如果在你的应用包里没有vendor代码，那你可以实现一种共通的模式，在webpack里成为“long-term vendor-caching”。

 

多页应用

webpack.config.js

 

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

 

 

它做了什么？告诉webpack我们想要3个独立的依赖图（就像上面的例子）

为什么？在一个多页应用里，服务器将为你取的一个新的HTML 文档。页面重载这个新的文档，资源被重新下载。这给了我们很好的机会来做下面的很多事情：

• 使用CommonChunkPlugin来作成在各个页面都使用的共享包。那些在各个入口点复用很多代码或者模块的多页应用，采用这些技术会去的很好的效果，虽然入口点会有所增加。

-- End --