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

<html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Documenttitle>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 的特点。

明天见(ง •_•)ง。

推荐阅读：

不小心将 Webpack 升级后我搞定了微前端。

别觉得搞前端就不需要懂后台知识。

5 分钟带你开发一个 Webpack Loader

Webpack 究竟解决了什么问题？

腾讯QQ偷我浏览记录到底想干嘛。

是我 Web 端配不上阿里了。

点点“赞”和“在看”，保护头发，减少bug。