Webpack-webpackconfig-plugin Configuration

Provideplugin

• Grammar:

Module.export = {    plugins: [         new  webpack. Provideplugin ({             ' jquery ',             ' jquery ',             ' window.jquery ': ' jquery ',             ' window.$ ': ' jquery ',        }),    ]}

• Role:

Rovideplugin mechanism is: when the webpack loaded into a JS module, there is an undefined and name matching (string exact match) in the configuration of the key variable, will automatically require the configuration of value specified by the JS module

The advantage of using Provideplugin is that you write your own code, again! Also No! Use! require! Jquery! Now!

Extended:

{
Test:require.resolve (' jquery '),//The goal of this loader configuration item is jquery in NPM
Loader: ' Expose?$!expose?jquery ',//First declare the jquery object as global variable ' jQuery ', and then further declare it as global variable ' $ ' through the pipeline
},

Why do you need expose-loader to have a provideplugin?

If all of your jquery plugins are loaded with webpack, it is enough to use Provideplugin.

But there's always something that needs to be loaded with <script>.

Webpack.optimize.CommonsChunkPlugin

• Grammar:

New Webpack.optimize.CommonsChunkPlugin ({    ' commons/commons ',          ' [name]/bundle.js ',     4,}),

• Role:

Extract all the common parts, parameters:

1. Name: ' commons/commons ': Give this chunk name (unique identifier) that contains the common code
2. Chunks: Represents the need to find common code for packaging in which chunk (and each of the entry in the Webpack configuration) can be understood. Without setting this parameter, the default fetch range is all chunk
3. FileName: ' [name]/bundle.js ': How to name the JS file produced after packaging, but also can use [name], [hash], [chunkhash] These variables, example is ' commons/commons/bundle.js ' (the path to the resulting file is spelled based on the Ouput.path in the Webpack configuration and the filename parameter above Commonschunkplugin )
4. Minchunks:4: Public code judgment: How many chunk are loaded by a certain JS module to be considered as public code

Extracttextplugin

• Grammar:

New Extracttextplugin (' [name]/styles.css '),

• Role:

Extract the CSS from the chunk,

Extracttextplugin initialization parameters are not many, the only required is the filename parameter, that is, how to name the generated CSS file. Similar to the Output.filename parameter in the Webpack configuration, this extracttextplugin filename parameter also allows the use of variables, including [ID], [name], and [Contenthash] Theoretically, if there is only one chunk, then it is OK to write a file name without these variables, but since we are doing a multi-page application, there must be multiple chunk (at least one chunk for each entry)

The configuration of the [name] corresponds to the name of the chunk, in the Webpack configuration, the name of each entry is set in the form of Index/index, Index/login, then the final CSS path will be like this: Build/index/index/styles.css, with chunk JS file put a piece (JS file path shape such as Build/index/index/entry.js)

Note: Also in Css-loader, Less-loader, Postcss-loader and other about the style of the loader configuration to do the corresponding changes

/\.css$//bootstrap/' Css-loader ',}]),}

Htmlwebpackplugin

• Grammar:

varGlob = require (' Glob '));varPath = require (' path ');varOptions ={cwd:'./src/pages ',//look in the pages directory.Synctrue,//This cannot be asynchronous, only synchronous};varGlobinstance =NewGlob. Glob ('! ( _)*/! (_) * ', options);//skip directories that begin with ' _ ', given that multiple pages share HTML and other resourcesvarPagearr = Globinstance.found;//an array, shaped like [' Index/index ', ' index/login ', ' Alert/index ']varConfigplugins =[];p Agearr.foreach (page)={Const Htmlplugin=Newhtmlwebpackplugin ({filename: ' ${page}/page.html ', Template:path.resolve (Dirvars.pagesdir, './${page}/html.js '),//it means to load JS under Page, and to load JS under the Commons/commons directory.Chunks: [Page, ' Commons/commons '], hash:true,//generate hash values for static resourcesXhtml:true,  }); Configplugins.push (Htmlplugin);});

• Role:

Generate HTML, Parameters:

1. FileName ' ${page}/page.html ',: Generated file name, multiple pages will have more than one htmlwebpackplugin, usually using loops to generate an array
2. Template:path.resolve (Dirvars.pagesdir, './${page}/html.js '), generated HTML based template
3. Chunks: [Page, ' commons/commons ']: Meaning load variable page and commons/commons directory JS
4. Hash:true: Generating hash values for static resources

Webpack-webpackconfig-plugin Configuration