Webpack Official Document Analysis (iii): Entry points Detailed

1, there are many ways to define the entry property in the configuration of Webpack, in order to explain why it is useful to you, we will show you how to configure the entry property.

2. Single entry syntax

Usage:entry: string|Array<string>

Webpack.config.js

Module.exports = {  './path/to/my/entry/file.js '};

The above notation is the following shorthand:

Module.exports = {  entry: {    './path/to/my/entry/file.js '}  };

This is a good choice when you want to quickly set up a webpack configuration for an application or tool that has an entry point (IE: library). However, there is little flexibility in extending or extending the configuration using this syntax.

3. Object syntax

Usage:entry: {[entryChunkName: string]: string|Array<string>}

Webpack.config.js

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

object syntax is more detailed. However, this is the most extensible way to define entries/entries in the application

4, the actual use of the program

(1) Separate application

Webpack.config.js

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

Cause: This setting allows you to take advantage of CommonsChunkPlugin any vendor reference in the application package and extract it into the vendor bundle and replace it with a __webpack_require__() call. If there is no vendor code in the application package, you can implement a Common pattern called long-term vendor caching in Webpack .

(2) Multi-page application

Webpack.config.js

Module.exports = {  entry: {    './src/pageone/index.js ',    './src/pagetwo/ Index.js ',    './src/pagethree/index.js '  };

Reason:

in a multi-page application, the server extracts the new HTML document for you. The page reloads the new document, and the resource is reloaded. However, this gives us a unique opportunity to do more than one thing:

• used to CommonsChunkPlugin Create a shared application code package between each page. as the number of entry points increases, multi-page applications that reuse a large number of code/modules between entry points can benefit from these technologies.

Webpack Official Document Analysis (iii): Entry points Detailed