Webpack Concept 1

Concept

• Webpack is a static module wrapper for a modern JavaScript application,
• Webpack when processing an application, he recursively constructs a dependency diagram that contains each module of the application and then packages the modules into one or more build files

Four Important concepts

1. Entrance (entry)
2. Outputs (output)
3. Loader (processing non-JS files)
4. Plugins (plugins)

Entrance (Enter)

Tell Webpack to use that module as the start of building an internal dependency graph! After entering the map entry file, Webpack will find those modules and libraries that are the starting point (direct or indirect) dependency of the portal!

Example:

module.exports={  entry:‘./path/to/my/entry/file.js‘    // 我们的入口文件};

Export (output)

Output tells Webpack where to produce builds and how to name these files by default ./dist . This will compile the entire application structure into the folder you specify.

Example

ConstPath= require(' path ');Module.exports = {  entry: './path/to/my/entry/file.js ',            //import file  Output: {    Path: Path.Resolve(__dirname, ' Dist '),        //The name and path of the folder after packaging    filename: ' My-first-webpack.bundle.js '        //The JS name after packaging  }};

Loader

loderLet the Webpack dog handle those 非javascript files (Webpack itself only understands JavaScript). Loader can convert all types of files to webpack valid modules that can be processed, and then use the Webpack packaging module to process them.

Essentially Webpack loader is a direct reference to converting all types of files into application dependency graphs (the final bundle).

Webpack Loader two parameters

1. testUsed to identify one or a file that should be converted by the corresponding loader
2. useYou should use that loader when identifying conversions

Example:

ConstPath= require(' path ');Module.exports = {  entry: './path/to/my/entry/file.js ',            //import file  Output: {    Path: Path.Resolve(__dirname, ' Dist '),        //The name and path of the folder after packaging    filename: ' My-first-webpack.bundle.js '        //The JS name after packaging  },  Module: {    rules:[{ Test: /\.txt$/,  Use: ' Raw-loader ' }]}};

Explain:
raw-loaderWebpack the original module to load the file as a string
moduleThis configuration tells you that the webpack "or" statement encountered during the packaging process require import is resolved to. Please use raw-loader when txt. Convert

Plugins (plugins)

loadercan be used to convert certain types of modules, while plug-ins can perform a wider range of tasks.
The scope of the plug-in includes:

1. Packaging optimization
2. Compression
3. Redefine variables in the environment

It is only necessary to use a plugin require . Then add it to the plugins array. Most plugins can be options defined by.
Note: If you use the same plugin multiple times in a configuration file, you need to new recreate a new instance by using the operator.

Example:

ConstWebpack= require(' Webpack ');ConstHtmlwebpackplugin= require(' Html-webpack-plugin '); //HTML requires NPM to installConstConfig= {  Module: {    rules:[{ Test: /\.txt$/,  Use: ' Raw-loader ' }]},  Plugins:[New Webpack.optimize.Uglifyjsplugin(),                //Compression JS    New Htmlwebpackplugin({Template: './src/index.html '})//Specify template]};

Mode

Use development one of the production to set the mode parameters to start webpack the built-in optimizations

module.exports={  mode:‘production‘};

Webpack Concept 1