Introduction and installation of webpack

1. Introduction to webpack

1. What is webpack?

Essentially, webpack is a static module bundler for modern JavaScript applications. When webpack
processes an application, it recursively builds a dependency
graph (dependency graph) that contains every module that the application needs, and then packages all these modules into one or more bundles.

2.Webpack role

1. Package (package multiple files into one js file to reduce server pressure and bandwidth)
2. Conversion (such as less sass ts) requires loader
3. Optimization (SPA is more and more popular, front-end projects are highly responsible, and webpack can optimize projects)

3.Webpack composition

1. Entry
2. Export
3. Converter loaders
4. Plugins
5. Development server
6. devServer
7. Mode

See the official website for specific concepts

Two, webpack installation

前提条件：Make sure the computer before installing webpack on node.js already installed, if not installed can go to the official website to download

1. Global installation

 npm install --global webpack

2. Local installation

npm install --save-dev webpack

If you are using webpack 4+ version, you also need to install CLI.

npm install --save-dev webpack-cli

3. Install a specific version

npm install --save-dev webpack@<version>

npm install --save-dev
abbreviation: npm install -D is
only installed in the development environment, not in the production environment
·
npm install --save
abbreviation: npm install -S
is installed in both development and production environments

Web front-end technology exchange QQ group: 327814892