欧美偷拍一区二区三区,人人草人人草,91麻豆午夜视频,亚洲青草视频,黄色成人电影在线观看,激情视频国产乱伦,免费观看日韩a,夜夜天天干

(????)??嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。

上次發(fā)《不小心將 Webpack 升級后我搞定了微前端。》后，發(fā)現大家對 Webpack 5 甚為關心。

Webpack 5 發(fā)布已經有一段時間了，很多小伙伴都在考慮要不要升級，有沒有升級的必要，不知道升級后有哪些改變。

今天我們就來做個對比看看，Webpack5 帶來了哪些全新改變。

沒有對比就沒有傷害，為了更好地傷害 Webpack 4 , 我們使用 Webpack4 和 Webpack 5 分別構建一個 React 項目來做對比：

mkdir webpack4 mkdir webpack5 
# 分別執(zhí)行 初始化命令 npm init -y

創(chuàng)建 /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開發(fā)服務器
  //  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'    })  ]
}

啟動命令的區(qū)別

先安裝：

 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 分鐘帶你開發(fā)一個 Webpack Loader

Webpack 究竟解決了什么問題？

騰訊QQ偷我瀏覽記錄到底想干嘛。

是我 Web 端配不上阿里了。

點點“贊”和“在看”，保護頭發(fā)，減少bug。

Webpack 5 新特性嘗鮮（一）：安裝與啟動