Last time I released the micro front end after accidentally upgrading Webpack. After that, we found that people were very interested in Webpack 5.

It’s been a while since Webpack 5 was released, and a lot of people are wondering if they want to upgrade, if they need to, and what changes will be made.

Today we’ll take a look at some of the new changes Webpack5 brings.

No comparison, no harm. To better hurt Webpack4, we built a React project using Webpack4 and Webpack 5 to compare:

Mkdir webpack4 mkdir webpack5 # Run the initialization command NPM init -y respectivelyCopy the code

Create/SRC /index.js, / SRC/app.js, / SRC /index.html

React Code example

index.js

import React from "react"
import ReactDom from "react-dom"

​import App from "./App"​

ReactDom.render(<App/>,document.getElementById('root'))
Copy the code

App.js

import React from "react"​

const App = ()=>{
  return (
      <div>
        <h1> Webpack4 or Webpack5 </h1>
      </div>
  )
}​

export default App;
Copy the code

index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "box-sizing: border-box; color: RGB (74, 74, 74); - add a line comments -- > < div id = "root" > < / div > < / body > < / HTML >Copy the code

Installation and startup

webpack4

// webpack4
 npm install webpack@4 webpack-cli@3  html-webpack-plugin css-loader style-loader babel-loader @babel/core  @babel/preset-env  @babel/preset-react  -D

 ​npm install react react-dom
Copy the code

Since the repository is already webPack5 by default, we need to add @4 to install WebPack4.

webpack5

// webpack5
npm install webpack webpack-cli html-webpack-plugin css-loader style-loader babel-loader @babel/core  @babel/preset-env  @babel/preset-react  -D

​npm install react react-dom
Copy the code

Basic configuration webpack.config.js

// export module = {// export module = // export module = // export module = // export module = // export module = // export module = // export module = // export module = // export module = // export module // Output/module/plugins mode // devServer // output:{filename:'./bundle.js', // output:{filename:'./bundle.js', // output:{filename:'./bundle.js', Path :path.resolve(__dirname,'dist')}, // module:{rules:[{test:/\.js$/, exclude:/node_modules/, use:[ { loader:'babel-loader', options:{ presets:[ '@babel/preset-env', '@babel/preset-react' ] } } ] }, ] }, // Plugins :[new HtmlWebpackPlugin({template:'./ SRC /index.html'})]}Copy the code

Differences between startup commands

First installation:

 npm install webpack-dev-server -D
Copy the code

Configure the server:

DevServer :{port:3004, open:true},Copy the code

Webpack 4: webpack4 / package. Json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
Copy the code

Webpack 5: webpack5 / package. Json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack",
    "start":"webpack serve"
  },
Copy the code

In the next article, take a look at the features of file caching and Tree Shaking.

See you tomorrow (ง •_•)ง.