Webpack 5 新特性尝鲜

最新推荐文章于 2024-05-12 09:08:08 发布

西岭老湿

最新推荐文章于 2024-05-12 09:08:08 发布

阅读量2.2k

点赞数

分类专栏：前端技术西岭文章标签： javascript

本文链接：https://blog.csdn.net/u012453679/article/details/113649176

版权

安装与启动Webpack 5 发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变；今天我们就来做个对比看看，webpack5 带来了那些全新的改变；没有对比就没有伤害，为了更好地伤害 webpack 4 , 我们使用 webpack4 和 webpack 5 分别构建一个 React 项目来做对比：mkdir webpack4 mkdir webpack5 # 分别执行初始化命令 npm init -y 创建文件 /src/index.

摘要由CSDN通过智能技术生成

安装与启动

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-e

最低0.47元/天解锁文章

西岭老湿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Webpack 5 新特性尝鲜

安装与启动Webpack 5 发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变；今天我们就来做个对比看看，webpack5 带来了那些全新的改变；没有对比就没有伤害，为了更好地伤害 webpack 4 , 我们使用 webpack4 和 webpack 5 分别构建一个 React 项目来做对比：mkdir webpack4 mkdir webpack5 # 分别执行初始化命令 npm init -y 创建文件 /src/index.
复制链接

扫一扫