Deep learning Webpack (ii)

Deep learning Webpack (ii)

In-depth study webpack (a), I through an example of the basic use of webpack, the following will be more systematic learning webpack basic concepts, for a technical mastery I think systematization is very important, if only smattering, more in-depth place to understand enough, Then you will be a little more than a crowd.

The core concepts of Webpack are four: entry (ingress), Output (egress), loaders (loader), plugins (plug-in). I'll introduce you next.

Entry

Webpack will create all the dependent charts in the app, and the first chart is the so-called entry file. The portal file tells Webpack where to start and how to package based on dependencies. So the portal file is the root file that takes the context or is the first file that your app uses.

In Webpack we define the entry file in the entry option in Webpack.config.js, the simplest way to define it is as follows:

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

This is very easy to understand, not to repeat. The following is a more detailed introduction.

Single entry configuration

Webpack.config.js content is as follows:

Const config = {  './path/to/my/entry/file.js'= Config

This is the same as the previous configuration, except that we have assigned the exported object to the Config object before exporting it.

Description: This syntax is simple syntax, it is a shorthand form of the following syntax .

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

What happens when do you pass a array to entry ? Passing an array of file paths to the property creates what is entry known as a "Multi-main entry". This is useful if you would like to inject multiple dependent files together and graph their dependencies into one "Chun K ".

This is a great choice when you want to quickly build a webpack configuration for a single-entry application. However, this syntax does not have much extensibility.

　Note : The main here is replaceable, and any name can be compiled successfully, but for the multi-entry file, here the name corresponds to the name of the HTML, such as two pages, A.html and b.html, then the two keys in entry are A and B.

Object Syntax Configuration

Webpack.config.js as follows:

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

Object syntax may seem jumbled, but this is the most extensible way to define the entry and exit files.

"Scalable webpack Configurations" is ones that can is reused and combined with the other partial configurations. This was a popular technique used to separate concerns by environment, build target and runtime. They is then merged using the specialized tools like Webpack-merge.

Scenarios

The use of the following portal files is an example of their use in a production environment:

Standalone app and Vender portal

The webpack.config.js is as follows:

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

On the surface, it tells Webpack to start at the same time from both App.js and Verdors.js (as a portal file), these charts are completely independent, which is very common in single-page applications (except for verdors).

Multi-page Application

Const config = {  entry: {    './src/pageone/index.js',     './src/pagetwo/index.js',    './src/pagethree /index.js'}  };

Unlike a single page, there are obviously multiple portal files for multiple pages, so the purpose of this configuration is to tell Webpack that we need three independent dependency graphs.

Output

Even if you need to pack all the files into a file you still need to tell Webpack where the final package will be, and the output property here tells Webpack how to handle the packaged file.

Const Path = require ('path'= {  './path/to/ My/entry/file.js',  output: {    'dist'),     ' My-first-webpack.bundle.js '   }};

Also note: Here's path when node's built-in module.

In addition, the path to the export file must be an absolute path and not a relative path.

That is, we used the Output.filename and Output.path properties to finally package all the files into the corresponding file of path and filename, so that in HTML we can apply the files.

In entry we know that the ingress can be multiple, but the configuration of the export file is indeed specified.

Here are some common options that the following properties can be defined in the output object.

Output.chunkfilename

Not used

Output.crossoriginloding

Related to cross-domain.

Output.devtoollinetoline

Not used.

Output.filename

That is, specify the file name of the export file, note: The absolute path cannot be used here, because the Output.path option determines the location of the file on disk, and filename is used only to name the file.

(1) Single entry

{  './src/app.js',  output: {    'bundle.js  ' ,    '/build'}  }//  Writes to disk:./build/bundle.js

That is, for a single-entry file, only one file is eventually packaged.

(2) Multi-entry

When the page is multi-entry, you should use the substitution method to ensure that each export file has a unique name.

where [name] will be replaced by the packaged file name.

[Hash] will be replaced by compilation (compile).

[Chunkhash] will be replaced by Chunk's hash. An example is shown below:

{  entry: {    './src/app.js',    './src/ Search.js'  },  output: {    '[name].js' ,     ' /build '   }}//  writes to disk:./build/app.js,./build/search.js

Note: The app and search pages here are app.html and search.html two.

Output.hotupdatechunkfilename

Not used

Output.hotupdatefilename

Not used

Output.hotupdatemainfilename

Not used

Output.jsonpfunction

Not used

Output.library

Not used

Output.librarytarget

Not used

Output.path

This must be an absolute path. As below, Config.js:

output: {    "/home/proj/public/assets",    "/ assets/"}

Index.html:

"/assets/spinner.gif"/>
A more complex example is the use of a CDN. Then config is as follows:
output: {    "/home/proj/cdn/assets/[hash]",    "  http://cdn.example.com/assets/[hash]/"}
　　
Output.sourcemapfilename
Not used
Hard-working people, luck will never be too bad!
　　
　　
Deep learning Webpack (ii)