webpack 4 的 30 个步骤构建 react 开发环境

news/2024/9/28 0:17:50 标签: webpack, react.js, 前端, css, postcss, 打包

将 react 和 webpack4 进行结合,集 webpack 的优势于一身,从 0 开始构建一个强大的 react 开发环境。

其实很多人都有 一看就会,一做就废 的特点(当然也包括我在内),这个时候,你需要制定一个略微详细的计划,就比如我这篇会首先列出知识点,列出大的方向,制定思维导图,然后根据思维导图编写代码,计划明确,就会事半功倍,因此,希望你可以跟着本篇循序渐进的跟着代码走一遍,不管是真实开发,还是面试,都有的扯

一、基础配置

1、init 项目

mkdir react-webpack4-cook

cd react-webpack4-cook

mkdir src

mkdir dist

npm init -y

2、安装 webpack, 配置webpack.config.js

yarn add webpack webpack-cli webpack-dev-server -D

touch webpack.config.js

  • Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。
  • Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  • Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
  • Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
  • Plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
  • Output:输出结果,在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

3、安装 react 并编写代码

cd src

cnpm i react react-router-dom -S

4、babel 编译 ES6、 JSX 等

cnpm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react -D

cnpm i @babel/polyfill @babel/runtime

新建.babelrc文件

5、按需引入polyfill

在 src 下的 index.js 中全局引入 @babel/polyfill 并写入 ES6 语法 ,但是这样有一个缺点:

  1. 全局引入 @babel/polyfill 的这种方式可能会导入代码中不需要的 polyfill,从而使打包体积更大

更改 .babelrc,只转译我们使用到的

npm install core-js@2 @babel/runtime-corejs2 -S

将全局引入这段代码注释掉

这就配置好了按需引入。配置了按需引入 polyfill 后,用到 es6 以上的函数,babel 会自动导入相关的 polyfill,这样能大大减少 打包编译后的体积。

6、插件 CleanWebpackPlugin

你经过多次打包后会发现,每次打包都会在 dist 目录下边生成一堆文件,但是上一次的打包的文件还在,我们需要每次打包时清除 dist 目录下旧版本文件

cnpm install clean-webpack-plugin -D

7、使用插件 HtmlWebpackPlugin

经过上一步的操作,index.html 也被清除了。因此我们将使用 HtmlWebpackPlugin 插件,来生成 html, 并将每次打包的 js 自动插入到你的 index.html 里面去,而且它还可以基于你的某个 html 模板来创建最终的 index.html,也就是说可以指定模板哦。

cnpm install html-webpack-plugin -D

cd src

touch template.html

8、使用 source-map,对 devtool 进行优化

webpack 中 devtool 选项用来控制是否生成,以及如何生成 source map。简言之,source map 就是帮助我们定位到错误信息位置的文件。正确的配置source map,能够提高开发效率,更快的定位到错误位置。

webpack.config.js 中选项 mode 下加上如下这句话:

devtool:"cheap-module-eval-source-map",

devtool:"cheap-module-source-map",

9、使用 WebpackDevServer, 配置开发服务器

webpack-dev-server 就是在本地为搭建了一个小型的静态文件服务器,有实时重加载的功能,为将打包生成的资源提供了web服务

打包js

支持ES6,react,vue

处理css,sass,以及css3属性前缀

编译css和scss

        cnpm install css-loader style-loader sass-loader node-sass -D

集成 postcss

        cnpm install postcss-loader postcss-cssnext -D

处理css

动态卸载和加载CSS

style-loader为 css 对象提供了use()和unuse()两种方法可以用来加载和卸载css

比如实现一个点击切换颜色的需求,修改index.js

处理sass

提取css文件为单独文件

产出html

处理引用的第三方库,暴露全局变量

webpack.ProvidePlugin参数是键值对形式,键就是我们项目中使用的变量名,值就是键所指向的库, 可以直接在全局使用 $ 变量

code splitting、懒加载(按需加载)

说白了就是在需要的时候在进行加载,比如一个场景,点击按钮才加载某个js.

CSS Tree Shaking

        npm i glob-all purify-css purifycss-webpack --save-dev

JS Tree Shaking

清除到代码中无用的js代码,只支持 import 方式引入,不支持 commonjs 的方式引入。

只要 mode 是 production 就会生效,develpoment 的 tree shaking 是不生效的,因为 webpack 为了方便你的调试。

optimization: { usedExports:true, }

图片处理

        cnpm i file-loader url-loader -D

Clean Plugin and Watch Mode

清空目录,文件有改动就重新打包

区分环境变量

开发模式与webpack-dev-server,proxy

DllPlugin 插件打包第三方类库

项目中引入了很多第三方库,这些库在很长的一段时间内,基本不会更新,打包的时候分开打包来提升打包速度,而 DllPlugin 动态链接库插件。

其原理就是把网页依赖的基础模块抽离出来打包到 dll 文件中,当需要导入的模块存在于某个 dll 中时,这个模块不再被打包,而是去 dll 中获取。

安装 jquery,并在入口文件引入。新建 webpack.dll.config.js 文件

在package.json中添加

        "build:dll": "webpack --config ./build/webpack.dll.config.js",

运行

        npm run build:dll

你会发现多了一个 dll 文件夹,里边有 dll.js 文件,这样我们就把我们的 jquery 这些已经单独打包了,接下来怎么使用呢?

需要再安装一个依赖

        npm i add-asset-html-webpack-plugin

合并提取 webpack 公共配置

开发环境与生产环境以及webpack配置文件的分离,具体需要用到webpack-merge,用来 合并 webpack配置。

到这里基本就结束了,觉得有帮助,不妨点个, 不足之处,还望斧正~


http://www.niftyadmin.cn/n/5679900.html

相关文章

使用腾讯地图,在地图上圈选标记半径范围

1、引入地图&#xff1a; <!-- 引入腾讯地图 --> <script charset"utf-8" src"https://map.qq.com/api/gljs?v1.exp&keyYOUR_KEY&librariesvisualization,service"></script> 2、具体实现如下&#xff1a; export default {…

linux下的分布式Minio部署实践

Linux下的分布式Minio部署实践 分布式Minio部署可以将多块硬盘&#xff08;位于相同机器或者不同机器&#xff09;组成一个对象存储服务&#xff0c;避免单机环境下硬盘容量不足、单点故障等问题。 1. 简介 在当前的云计算和大数据时代&#xff0c;IT系统通常的设计理念都是…

SpringCloud源码:客户端分析(一)- SpringBootApplication注解类加载流程

总结一句话 用EnableDiscoveryClient注解客户端-启动类&#xff0c;配合springbootapplication&#xff0c;完成两个步骤&#xff1a; 自动读取spring-factories文件的全限定类名内容通过selectImport对这些类进行初始化 背景 spring.factories作用 在maven依赖&#xff1a; sp…

王道数据结构 | 第八章 排序【未完成】

9.27预&#xff1a;8.1 8.2 8.39.29预&#xff1a;8.4 8.5 笔记整理10.1预&#xff1a;8.6 8.7 summary 第七章 顺序查找 折半查找 分块查找 以及利用判定树计算对应的ASL&#xff08;成功 or 失败&#xff09;二叉排序树/ 二叉搜索树 已知n个结点 有多少种树形>卡特…

Zabbix自动发现SNMP主机

前言 利用Zabbix监控DELL R740主机硬件&#xff0c;监控通过自动发现主机&#xff0c;链接SNMP监控模板 一、配置自动发现 自动发现脚本 cat discovery_host.pyfrom os.path import abspath, dirname, join import json import sysreload(sys) sys.setdefaultencoding(utf-8…

vue通过ref实现组件之间传值

文章目录 概述父组件向子组件传值示例 子组件通知父组件示例 概述 在Vue 2中&#xff0c;可以使用ref属性在父子组件之间传递值。父组件可以通过ref属性获取子组件的实例&#xff0c;进而访问子组件的方法和数据。 父组件向子组件传值 示例 父组件 (Parent.vue): <temp…

怎么用gitee做一个图片仓库,在md文档中用这个图片网络地址,然后显示图片

痛因&#xff1a;我为什么要这样做&#xff0c;呃&#xff0c;我一开始图片都是存本地地址的&#xff0c;放在和这个md文档同级的assets文件夹下面&#xff0c;这样子确实当时很方便&#xff0c;复制粘贴什么也不用管&#xff0c;但是想把这个文档分享给别的人的时候&#xff0…

数据集成需要解决的主要问题有哪些?

在企业业务的不断扩展和数据的日益增长下&#xff0c;数据集成已成为推动企业创新和发展的关键力量。然而&#xff0c;数据集成并非易事&#xff0c;它面临着诸多挑战和问题。那么&#xff0c;数据集成究竟需要解决哪些主要问题呢&#xff1f; 一、数据集成面临的主要问题 1. …