One: The basis of webpack use

One: What is Webpack?

　　Webpack is a modular management tool that uses Webpack to compress, preprocess, package on demand, and load on demand. The core of Webpack is a static module package for modern JavaScript applications device. when Webpack processes your application, it builds a dependency graph internally , which You can map each module that your project requires and generate one or more packages .

Two: What are the important characteristics of Webpack

1. Plug-in: The webpack itself is very flexible and provides a rich plug-in interface. Based on these interfaces, Webpack has developed many plugins as built-in features.

2. Fast: Webpack uses asynchronous IO and a multilevel caching mechanism. So the speed of the webpack is very fast, especially for incremental updates.

3. Rich loaders:loaders is used to preprocess files. This way, Webpack can pack any static files.

4. Gao Shi: webpack also supports AMD/COMMONJS/ES6 module scheme. Webpack will statically parse your code and automatically help you manage their dependencies. In addition, Webpack has a good compatibility with third-party libraries.

5. The development model is friendly: Webpack provides many auxiliary functions for the development mode. such as Sourcemap, hot update and so on.

6. Optimization: Webpack provides a number of optimization mechanisms to reduce the file size of packaged output, but it also provides a hash mechanism to solve browser caching problems.

7. Multi-use scenarios: Webpack not only for web scenarios, but also for webworkers, node. JS Scenarios

Three: Webpack installation

1. Webpack is based on the NODEJS environment and first installs node.

2. Using NPM for global installation:NPM install-g Webpack

View version webpack-v not executed.

Cause: Webpack4 The CLI and the webpack, must download the WEBPACK-CLI.

3. Use NPM for global installation: NPM install-g webpack-cli.

Four: Simple and practical

1. Create a new folder MyProject

2. Use terminal for NPM init initialization in folder MyProject to generate a Package.json file

3. Create a new webpack.config.js in the folder MyProject for configuration.

4. index.html file, main.js file, sum.js file.

5. When webpack.config.js is not configured. Webpack./js/main.js (Entry file)-O./bundle.js (The storage folder and file name of the packaged file). Note: Middle plus-o specifies packaged files

V: Configuration Webpack.config.js

1. The entry file, by default, is the value ./src/index.js , but you can entry the property by using the Webpack.config.js To specify different (or multiple entry points),

　　　module.exports = { 　　　　entry: ‘./path/to/my/entry/file.js‘　　　};　
　2. 输出文件，可以通过output在您的配置中指定一个字段来配置此过程的这一部分：

　　　 Const PATH= require(' path '); 　　　 Module. Exports= { 　　　　 entry: './path/to/my/entry/file.js ', 　　 　　 Output: { 　　　　 Path: Path.Resolve(__dirname, ' Dist '  ),filename:   ' my-first-webpack.bundle.js '  }};
3. Enter Webpack--config webpack.config.js in the terminal
　　　 　　　　  　　　　

Five: Configure Package.json Quick Package

1. Add in Script

　　　　"Scripts": {
　　　　　　"Dev": "Webpack -- mode development ",//development environment

　　　　　　"Build": "Webpack--mode production",//development environment
　　　},

--mode development指定打包模式

2. Do not specify a direct packaging default development environment packaging code compression line.

One: The basis of webpack use