Chapter Content:

  1. What is the webpack
  2. Why use Webpack
  3. How do I configure WebPack
  4. How to use the webpack command

1. What is Webpack?

Webpack is a static module wrapper for modern JavaScript applications

Features:

  • Default: Only JavaScript can be processed by default. Loader or plugins need to be configured to process files of other types.
  • Package: Comb and package each dependency file to form a JS dependency file.
  • Powerful, loader and plugins can be configured according to personal needs. For example, convert ES6 to ES5, and convert LESS and SASS to CSS.

2. Why use WebPack

2.1 No trouble with packing

Suppose we have three JS files, and the browser needs to send three HTTP requests to get them and then execute the code in turn. If one of the files is delayed because of network problems, the entire page will be delayed as well. Three files is fine, but as our project grows to dozens or hundreds of JavaScript files, the problem becomes more serious.

Wouldn’t it be nice if we could combine these three files into one file? Having only one file reduces THE number of HTTP requests, speeds up rendering, and reduces the size of the code during the packaging process. During the packaging process, WebPack will analyze the dependencies between files, and then generate a dependency graph and save it as a file, which can be read by the browser when it runs the code in the future to learn how each code block is related to each other and how to invoke it.

2.2 Modularization

In addition, WebPack also supports modularity, which allows us to break down a complex system into modules. Increased encapsulation and reuse of code. In the module we only need to export the variables or functions that will be shared and import them where needed.

2.3 Webpack packaging process

  1. Analyze the dependency tree for the entire application, starting with the entry file
  2. Wrap each dependency module in an array to be called
  3. Implement the method of module loading and place it in the environment of module execution, ensuring that modules can call each other
  4. Put the logic to execute the entry file in a function expression and execute the function immediately

3. How do I configure WebPack

Refer to Webpack Chinese

The core modules of Webpack:

  • The entrance (entry)
  • Output (output)
  • loader
  • The plug-in (plugins)

3.1 installation

Webpack NPM install webpack webpack-cli -g

3.2 webpack configuration

In WebPack 4, it can be used without any configuration. However, these generic configurations may not be suitable for our project, we can customize the personalized configuration in the webpack.config.js file.

The webpack.config.js location is as follows:

3.3 entry

Entry is used to configure which modules act as the entry, that is, which file to start packing from.

Webpack.config.js single file entry:

Module. Exports = {entry: '/ path/to/my/entry/file. The js' / / entry file path};Copy the code

Webpack.config.js multi-file entry:

const path = require('path');
    
module.exports = {
     entry: {
         index:'./src/index.js',
         hello:'./src/hello.js'
    }
},`
Copy the code

3.4 the output

Output is used to specify where to put your packed files and how to name them.

Module. exports = {entry: './ SRC /index.js', output: {filename: 'main.js', // export file path: Path. resolve(__dirname, 'dist');Copy the code

At this point you type Webpack at the terminal to start packing

3.5 loader

Loader can convert non-JS files into JS files (Webpack can only package JS files) and then use webPack’s packaging function to package them. Loader has two important properties

  • The test property identifies the files or files that should be converted by the corresponding loader.
  • The use attribute indicates which loader should be used for conversion.

Example: the CSS – loader

1. Install CSS-loader and style-loader

npm install --save-dev css-loader style-loader

2. Add index. CSS to index.js (style whatever you want)

3. Configure the webpack.config.js file

const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: / \. CSS $/, / / is used here to match regular CSS file use: [' style - loader ', 'CSS - loader']}}],}Copy the code

3.6 the plugins

Plugins are designed to do other things that Loader cannot do, from packaging optimization and compression to redefining environment variables, and are powerful enough to handle a wide variety of tasks.

Using plugins is also simple and consists of three steps:

  1. Install the plugins to use
  2. First require the corresponding module
  3. In plugins, the new module ()

Example html-webpack-plugin :(to package HTML files)

NPM I html-webpack-plugin –save-dev

Configure the webpack.config.js file

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); Module. exports = {entry: './ SRC /index.js', output: {filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: / \. CSS $/, / / is used here to match regular CSS file use: [' style - loader ', 'CSS - loader']}}], plugins: [new HtmlWebpackPlugin({//2.new HtmlWebpackPlugin() template: './index.html', // filename: './main.html' // output file name})]}Copy the code

4. How to use the webpack command

1. The easiest way to do this is to type Webpack in the terminal

Json file. The build command is configured in the scripts module. After entering NPM run build, webpack will package the file according to the configuration in webpack.config.js.