Webpack automatic packaging function implementation

1. Understand webpack

The current difficulties faced by web development
1. File dependencies are complicated
2. Static resource request efficiency is low
3. Modular support is not friendly
4. The browser has low compatibility with advanced javascript features

webpack is a front-end project construction tool (packaging tool)
Provides powerful functions such as good modular support, as well as code compression obfuscation, handling JS compatibility issues, performance optimization, etc.

2. Install and configure webpack in the project

1. Runnpm install webpack webpack-cli -DCommand to install webpack-related packages
2. In the project root directory, create a webpack configuration file named '
3. In the webpack configuration file, initialize the following configuration:

  = {
      mode:'development'  //mode is used to specify the build mode }

4. Under the scripts node in the configuration file, add the new dev script as follows:

  "script":{
       "dev":"webpack"  //The script under the script node can be executed through npm run  }

5. Run npm run dev command in the terminal and start webpack for project packaging

3. Webpack packaging

1. The default packaged entry file is under src, and the default packaged output file is under dist
2. If you want to modify the packaged entry and exit, you can add the following configurations:

const path = require('path')
 = {
    entry: (__dirname, './src/'),
    output: {
        path: (__dirname, './dist'), // The path to the output file        filename: '' // Name of the output file    }
}

3. Run npm run dev for packaging, and you will find that the file appears in the dist file
4. Refer to it and run the page.

4. Automatic packaging of webpack

1. Why do you need to automatically package?
If you modify the style in js, such as the $('li:odd').css('backgroundColor','red') code in jquery, you will find that the page style has not changed, because we introduced it instead of it, so every time you modify the code, you have to package it with npm run dev, which will be more convenient to package automatically, that is, hot updates.
2. Configure the automatic packaging function of webpack
(1) Run the npm install webpack-dev-server -D command to install tools that support automatic project packaging
(2) Modify the dev command in -> scripts as follows:

 "scripts":{
      "dev":"webpack-dev-server"   //The script under the script node can be executed through npm run }

(3) Change the reference path of the scripts script in src -> to "/". The file is virtual and invisible.
(4) Run npm run dev command and repackage
(5) Visit the http://localhost:8080 address in the browser to view the automatic packaging effect

Cannot find module 'webpack-cli/bin/config-yargs'
The problem is that webpack and webpack-dev-server version are incompatible

This is the end of this article about webpack automatic packaging. For more related webpack automatic packaging content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!