Webpack 5 新特性尝鲜（一）：安装与启动

上次发《不小心将 Webpack 升级后我搞定了微前端。》后，发现大家对 Webpack 5 甚为关心。

Webpack 5 发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变。

今天我们就来做个对比看看，Webpack5 带来了哪些全新改变。

没有对比就没有伤害，为了更好地伤害 Webpack 4 , 我们使用 Webpack4 和 Webpack 5 分别构建一个 React 项目来做对比：

mkdir webpack4 
mkdir webpack5

# 分别执行 初始化命令 
npm init -y

创建 /src/index.js、/src/App.js、/src/index.html

React 代码示例

index.js

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

import App from "./App"

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

App.js

import React from "react"

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

export default App;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 加一行注释 -->
  <div id="root"></div>
</body>
</html>

安装与启动

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

因为仓库中目前默认就已经是 webpack5 了，所以，想要安装 webpack4，我们需要加上 @4 的版本号。

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

基础配置 webpack.config.js

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

module.exports = {
  // entry 入口，output出口，module模块，plugins 插件  mode工作模式，devServer开发服务器

  //  mode 工作模式
  mode: 'development', // production  、 development、none

  // 入口
   entry:'./src/index.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'
    })
  ]

}

启动命令的区别

先安装：

 npm install webpack-dev-server -D

配置服务器：

//  服务器
  devServer:{
    port:3004,
    open:true
  },

webpack 4 ：webpack4/package.json

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

webpack 5 ：webpack5/package.json

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

下一篇，来看看文件缓存和 Tree Shaking 的特点。

明天见(ง •_•)ง。