What is the webpack

With the development of the front-end and the increasing complexity of front-end projects, we need to solve various problems in daily development:

  1. During the development process, modularity was used for development, but there are many ways to modularity, and older browsers do not support modularity

  2. We will use some advanced features to use to promote our development efficiency and code security, such as ES6 +, TS, LESS and SASS, etc., but these new features and cannot be directly by the browser identification, we need through the corresponding feature provides tools to compile, make these new features into the browser can directly identify the grammar. This leads to a variety of configuration tools, and manual debugging becomes cumbersome every time you write

  3. It is hoped that real-time monitoring of file changes will be reflected in the browser to improve the efficiency of development

  4. After development, we need to compress, merge, and optimize the code;

Because of these problems, a number of build tools have emerged, such as rollup, Vite, WebPack, etc

Through the way of pre-defined configuration, to simplify our compilation work, improve the development efficiency

Let us develop the project code in any way we like, regardless of code compatibility and support, because the build tools will take care of it

Webpack is a static, modular packaging tool for modern JavaScript applications

  1. Bundler: This is the heart of Webpack, where separate modules are grouped together in a certain way to form one or more large files
  2. Static: The final packaged code is a static resource (deployed to a static server)
  3. Modular Module: WebPack supports all kinds of modular development by default, ES Module, CommonJS, AMD, etc

Early experience

  1. Webpack runs in a Node environment, so node needs to be installed first

    #Check whether the installation is successful
$ node --version
$ npm --version
Copy the code

  2. Webpack installation depends on Webpack and Webpack-CLI

    #Global installation - Webpack becomes a global command
$ npm i webpack webpack-cli -g

#Partial installation - project level Webpack, logging the version of webpack to package.json 
#1. Make sure the entire development team is using the same version of WebPack
#2. Ensure that the webpack versions used by different projects on the same host are independent and do not conflict with each other
$ npm i webpack webpack-cli -d

#Webpack - The NPM package essentially exports a function
#Webpack - CLI - Webpack 4 starts a separate NPM package 
#Webpack provides tools that help you parse the parameters passed in from the command line, parse the configuration file, and pass the parsed content to WebPack
#So webpack-CLI is not necessary
#For example, vue-cli-service is used to replace webpack-cli in vue-cli
#The React scaffolding uses React -scripts
Copy the code

  3. use

Math.js — ESM module

export const sum = (num1, num2) = > num1 + num2
Copy the code

Form. js — CJS module

module.exports.getFullName = (firstname, lastname) = > firstname + The '-' + lastname
Copy the code

Index.js — Main module

// With WebPack, the browser can run the packaged code directly

Webpack supports both CJS and ESM
import { sum } from './js/math'

// Importing js files in webpack can omit the suffix
// Because webpack has js extensions configured as' resolve.extensions' by default
// So WebPack can automatically match and append the js suffix when parsing the imported module resources
import { getFullName } from './js/format'

console.log(sum(20.30))
console.log(getFullName('Klaus'.'Wang'))
Copy the code

Compile the package

When compiling, you can pass in some parameters on the command line, which can be found on the official website

Method 1

#1. Compile using the global WebPack
#2. The default entry file is SRC /index.js
#3. The default output file is dist/main.js
$ webpack
Copy the code

Way 2

#Enter the webpack command directly on the command line for packaging, using global packaging
#If you use NPX webpack, you will first use the local webpack for packaging
#If a webpack does not exist locally, a webpack will be downloaded from the temporary folder
#The temporary folder will be automatically removed when appropriate
$ npx webpack
Copy the code

Methods 3

// package.json
"scripts": {
  // When building a project, the directive is usually called build
  // When running a service, the command is usually named serve
  
  // package.json commands will use local webpack in preference to global webpack
  "build": "webpack" 
}
Copy the code
#use
$ npm run build
Copy the code

tips:

  1. The local webpack corresponds to node_modules/.bin/webpack

  2. By default, webPack only converts modularity-related syntax when it comes to packaging, not other features such as ES6+

    If you need to use other features provided by WebPack, you need to configure the WebPack configuration file and the corresponding tools

    For example, if you need to convert ES6+ to ES5, you need to manually configure Babel and Webpack