This is the 8th day of my participation in the August More Text Challenge

1. Introduction to Webpack

Webpack is a module bundler

Webpack is a tool for packaging modular JavaScript. It starts with the entry module, identifies the modular import statements in the source code, recursively finds all the dependencies of the entry and exit files, and packages the entry and all its dependencies into a single file

It is the embodiment of engineering and automation thought in front-end development

2. Install WebPack

2.1. Environment Preparation

Install the node

Version Refer to the latest version released on the official website to improve the packaging speed of WebPack

The next step will be successful installation

2.2 Installing WebPack globally (not recommended)

When you install webPack V4+, Webpack -cli NPM install webpack webpack-cli -g # Check version webpack -v # Uninstall webpack webpack-cli -gCopy the code

Install Webpack globally, which locks webpack in your project to the specified version, causing conflicts and build failures in different projects because WebPack depends on different versions.

2.3 Project Installation (recommended)

# Install the latest stable version of NPM i-d webpack # Install the specified version of NPM i-d webpack@<version> # Install the latest experience version may contain bugs, do not use it in production environment NPM i-d webpack@beta # To install WebPack V4+, you need to install webpack-cli NPM I -d webpack-cliCopy the code

2.4. Check whether the installation is successful

webpack -v // Command not found Is found in the global environment by default
npx webpack -v// NPX helps us find webpack in node_modules of the project
./node_modules/.bin/webpack -v// Specify webpack in the current node_modules module
Copy the code

Printing the version number indicates that the installation was successful

3. Start WebPack to perform the build

3.1 WebPack default configuration

  • Webpack supports JS modules and JSON modules by default
  • Supports modules such as CommonJS, Es Moudule, and AMD
  • Webpack4 + supports zero configuration, but is weak and requires additional extensions for slightly more complex scenarios

3.2. Prepare for the build

  • Creating a SRC folder
  • Create SRC /index.js, SRC /index.json, and SRC /other.js
### index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module
console.log(json, add(2.3));
### index.json
{
 "name": "JOSN"
}
### other.js
export function add(n1, n2) {
 return n1 + n2; 
}
Copy the code

3.3. Perform the build

Method 1: NPX webpack directly

Method 2: Modify package.json file:

"scripts": {
 "test": "webpack"
},
Copy the code

The console runs NPM run test

How it works: Create a soft link in the node_modules/. Bin directory using shell scripts.

3.4. Construction is successful

After executing the command, you’ll find a dist folder in your folder with a main.js file that contains an immediate function.

3.5. Default Configuration

The default configuration of webpack4+ is as follows:

const path = require("path");
module.exports = {
 // Mandatory WebPack execution build entry
 entry: "./src/index.js".output: {
 // Merge all dependent modules into main.js
 filename: "main.js".// The output file is stored in an absolute path
 path: path.resolve(__dirname, "./dist")}};Copy the code

4. Core concepts of WebPack configuration

Zero configuration is very weak, and specific requirements always need to be configured themselves

Webpack has a default configuration file called webpack.config.js, which we can modify to personalize

  • Use the default configuration file: webpack.config.js
  • Do not use custom configuration files: for example, webpack.common.js, you can specify which configuration file webpack uses to perform the build by using –config webpack.common.js

Webpack.common.js configuration infrastructure:

module.exports = {
  entry: './src/index.js'.// Package the entry file
  output: './dist'.// Output structure
  mode: 'production'.// Package the environment
  module: {
    rules: [
      // Loader module processing
      {
        test: /\.css$/,
        use: 'style-loader',}]},plugins: [new HtmlWebpackPlugin()], // Plug-in configuration
};
Copy the code

4.1 Entry (Entrance)

Specify the WebPack Entry file: The first step in a WebPack build will start with Entry, which can be abstracted as input

  • Single entry: SPA, essentially a string
module.exports = {
	entry: {main: './src/index.js'}}Copy the code

I could just write it as

module.exports = {
	entry:'./src/index.js'
}
Copy the code
  • Multiple entry: is an object
module.exports = {
	entry: {index:"./src/index.js".login:"./src/login.js"}}Copy the code

4.2. Output

To tell WebPack how to output the compiled file to disk, after WebPack has gone through a bunch of processing and come up with the desired code

  • Single entry configuration
module.exports = {
	entry:'./src/index.js'.output: {
		filename: "bundle.js".// The output file name
		path: path.resolve(__dirname, "dist")// Output file to disk directory, must be an absolute path}}Copy the code
  • Multiple entry configuration
module.exports = {
	entry:'./src/index.js'.output: {
		filename: "bundle.js".// The output file name
		path: path.resolve(__dirname, "dist")// Output file to disk directory, must be an absolute path}}Copy the code

4.3 mode (Mode)

Mode specifies the current build environment

  • production
  • development
  • none

Setting mode automatically triggers webpack built-in functions for optimization. The following string values are supported:If not, Webpack sets the default value of mode to Production.

4.4, the loader

Webpack supports only JS and JSON file types out of the box, Loaders supports other file types and converts them into valid modules that can be added to dependency diagrams.

Is itself a function that takes the source file as an argument and returns the result of the transformation.

Common loaders are:

The use of the loader

module.exports = {
  output: {
    filename: 'bundle.js',},module: {
    rules: [{test: /\.txt$/, use: 'raw-loader'},],}};Copy the code

Custom loader

As shown in the

4.5 Plugin

  • Plugins can do something for you when webPack is running at a certain stage, similar to the concept of a life cycle.
  • Extension plugins that inject extension logic at specific points in the Webpack build process to change the build result or do what you want.
  • Apply to the entire build process.

Common plugins are:

The use of the plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    filename: 'bundle.js',},plugins: [
    new HtmlWebpackPlugin({
      template:
'./src/index.html',})]};Copy the code

A custom plugin

As shown in the