[Translation] webpack official website documentation: concept -- 2. entry point

Original translation, please indicate the source when reprinting.

Original address: https://webpack.js.org/concepts/entry-points

 

As we mentioned in the introduction, there are many ways to define entry properties in your webpack config file. We'll show you a few ways and why it might work for you.

 

Single Entry (shorthand) syntax

用法：entry: string | Array<string>

 

webpack.config.js

 

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

 

 

The single-enry syntax is shorthand for the following command:

 

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

 

 

Single entry point is a good choice when you want to quickly set up webpack configuration for an application or tool. Of course, using this command doesn't give you much flexibility when expanding or shrinking your configuration.

 

object syntax

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

 

webpack.config.js

 

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

 

 

This object syntax is a bit more verbose. But this is the most scalable way to define entries/entries in your application.

 

script

Here is a list of entry configurations and their real use cases:

 

Separate App and Vendor Entry

webpack.config.js

 

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

 

 

what does it do? On the surface it tells webpack to start with the app.js and vendor.js files to create the dependency graph. These dependency graphs will be completely separated and independent of each other (there will be a webpack bootstrap in each package). This is common for single-page applications with only one entry point (excluding 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 --