webpack 5 搭建 + react
前言
在项目开发中，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据需求自己搭建可能会更好，一方面小项目不需要脚手架那么丰富的功能，另一方面可以提高对项目的掌控度以方便后期的扩展。
这篇文章是在实践中总结的，具有实操性，读者可跟着一步步进行搭建，中间我会穿插一些简单原理。
源码
Git源码地址
后期会持续更新优化
目标 学习使用和为什么使用它？用搭建开发环境；用搭建生产环境； 什么是 ？
中文文档
是一个模块打包器，它可以打包任何东西。你可以在开发时使用最新的特性或，会将它编译成浏览器支持的代码并压缩它；你还可以在中导入需要用到的静态资源。
在开发过程中，提供了开发服务器并支持HMR，什么是HMR和怎么配置后面会详细介绍，现在我们只要知道当我们保存代码的时候会帮我们自动重新编译和刷新浏览器。
的能做的远不止这些，这篇文章主要是帮助你熟悉基本概念和如何去配置自己的脚手架。
开始搭建
这篇文章算是一个较为完整的实战教程，目标是搭建一个可用的脚手架，在此基础上可以扩展出更多的功能。
架构需要支持的特性 安装
新建一个项目，进入项目根目录，创建默认的.json
yarn/cnpm init -y
安装和-cli
yarn add webpack webpack-cli -D
基础配置
在根目录新建文件 ..js
Entry入口文件，会首先从这里开始编译
// webpack.config.js
const path = require('path');
module.exports = {entry: {//入口文件app: "./src/index.tsx",},
}
定义了打包后输出的位置，以及对应的文件名。[name]是一个占位符，这里是根据我们在entry中定义的key值，即等价于app；
module.exports = {output: {//出口文件publicPath: "/",path: path.resolve(__dirname, "./dist"),filename: "[name].bundle.js",},
}
在src下新建index.js，然后现在可以使用我们的最小化配置进行打包。在.json中加入以下代码；
"scripts": {"build": "webpack"
}
运行该命令
yarn run build
可以在命令行中看到打包的结果，并且在根目录下生成了一个dist目录，说明打包成功。
到此我们就完成了简单的打包了，下main开始扩展功能加入;
插件使具备可扩展性，可以让我们支持更多的功能。
模板文件
当我们构建一个web app的时候，我们需要一个HTML页，然后再HTML中引入，当我们配置了打包输出的文件是随机字符串时，每次手动更新就特别麻烦，所以最好的方法是可以自动将打包进HTML中。
//安装插件html-webpack-plugin
yarn add html-webpack-plugin -D
在根目录下新建一个文件/index.html，内容如下
<!DOCTYPE html>
<html lang="en"><head><title><%= htmlWebpackPlugin.options.title %></title></head><body><div id="root"></div></body>
</html>
其中title是读取html--插件的配置，配置如下
// 在webpack.config.js文件中引入html-webpack-plugin
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {plugins: [new HtmlWebpackPlugin({title: "webpack5",//对应打包后html文件 titletemplate: path.resolve(__dirname, "./public/index.html"),//html配置路径filename: "index.html",}),],
}
现在我们再次运行yarn run build，可以看到dist下多了一个index.html，其中自动插入了标题和，效果如下：
打包前清除dist
● clean-- - 打包前移除/清理上次打包目录
yarn add clean-webpack-plugin -D
// 在webpack.config.js文件中引入clean-webpack-plugin
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')module.exports = {plugins: [//打包前清除上次打包new CleanWebpackPlugin(),],
}
命令行友好提示
yarn add friendly-errors-webpack-plugin -D
// webpack.config.js
const friendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');module.exports = {plugins: [//命令行友好提示new friendlyErrorsWebpackPlugin(),]
}
使用去解析模块，想要去如何理解、静态资源（图片、字体、css）、转移和Babel，都需要配置相应的规则，根据自己需求去配置各种。
插件
在项目中只有一个HTML和一些是没什么用的，我们还需要能够做一些事：
Babel
Babel 是一个 编译器，能将 ES6 代码转为 ES5 代码，让你使用最新的语言特性而不用担心兼容性问题，并且可以通过插件机制根据需求灵活的扩展，我们需要先安装以下库
yarn add babel-loader @babel/core -D
// webpack.config.js引入
module.exports = {module: {rules: [// JavaScript{test: /\.m?js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},},],},
}
在 Babel 执行编译的过程中，会从项目根目录下的配置文件读取配置。在根目录下创建Babel的配置文件babel..json
yarn add @babel/preset-env -D
{"presets": ["@babel/preset-env"]
}
图片和字体
解析图片的配置
module.exports = {module: {rules: [// Images{test: /\.(?:ico|gif|png|jpg|jpeg)$/i,type: 'asset/resource',},],},
}
解析字体文件的配置
module.exports = {module: {rules: [// Fonts and SVGs{test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,type: 'asset/inline',},],},
}
现在我们希望能够在中导入CSS，以及将CSS注入DOM，另外还想使用CSS的高级特性，如，需要依赖一下库
yarn add css-loader style-loader postcss-loader postcss-preset-env postcss postcss-cssnext -D
新建配置文件..js，配置如下
module.exports = {plugins: {'postcss-preset-env': {browsers: 'last 2 versions',},},
}
配置
// webpack.config.js
module.exports = {module: {rules: [// CSS, PostCSS, and Sass{test: /\.(scss|css)$/,use: ['style-loader', {loader: 'css-loader',options: {importLoaders: 1,},}, 'postcss-loader'],},],},
}
开发环境
让我们从设置配置为开发模式开始，表示当前的配置的配置为开发环境的配置
// webpack.config.js
module.exports = {// 打包环境 默认是生产环境 production// 如果是开发环境 这里需要换成 development// 接下来为了观察打包后的文件，使用 developmentmode: "development",
}
使用 maps
为了在报错的时候更好的追踪代码和给出错误代码出现的地方的提示，我们可以使用 map，配置如下
module.exports = {//sourceMap 原映射devtool: 'inline-source-map'
}
HMR
当我们改动代码时，希望能自动重新编译代码，提供了三种不同的方式：
监听模式-dev--dev-
大多数情况，使用的是-dev-，本文也是使用这个
-dev-
它为我们提供了一个服务器和live 的能力，我们需要首先安装它
yarn add -dev- -D
然后配置如下
// webpack.config.js
module.exports = {devServer: {open: true, //项目启动直接打开hot: true, //开启热更新port:8888, //端口号static: "./public", //指向静态文件},
}
// package.json中添加启动配置
{"scripts": {"start": "webpack serve"}
}
我们在8888端口监听了一个服务，监听的目录是dist，并且支持HMR，现在打开:8888，可以看到我们的页面，然后改动代码，浏览器会自动刷新更新效果，是不是很酷！
上面提到了HMR，它的全称是Hot ，翻译过来就是热模块替换，我认为它是提供的最有用的一个特性，它允许我们只更新改动过的模块，而不需有全部更新，我们在上面已经开启了该功能，即hot: true。
安装
yarn add typescript ts-loader -D
在根目录下创建的配置文件.json，具体配置如下
{"compilerOptions": {"outDir": "./dist/","sourceMap": true,"module": "CommonJS","target": "ES5","jsx": "react","esModuleInterop": true,"allowJs": true,"strict": true}
}
在..js 配置&
module.exports = {/* 配置ts*/module: {rules: [// ts{test: /\.tsx?$/,use: "ts-loader",exclude: "/node-modules/",},],},resolve: {extensions: ["", ".ts", ".tsx", ".js", ".jsx"],alias: {//根据个人喜好配置@指引文件路径"@": require("path").resolve(__dirname, "./src"),},},
}
引用React
在上面配置中，已经开启了支持react，现在只需安装react的依赖即可
yarn add react react-dom @types/react @types/react-dom
然后将入口文件改成.tsx后缀，内容如下
entry: {//入口文件app: "./src/index.tsx",},
引入react & react-dom 捆绑到dom上；
import React from 'react';
import ReactDOM from 'react-dom';const App = () => {return <div>hello world2</div>;
};
ReactDOM.render(<App />, document.getElementById('root'));
代码规范
是一个诞生于2016年就迅速流行起来的专注于代码格式化的工具。出道即巅峰啊-.- 只关注格式化，并不具有lint检查语法等能力。它通过解析代码并匹配自己的一套规则，来强制执行一致的代码展示格式。 它在美化代码方面有很大的优势，配合可以对格式化基础上做一个很好的补充。
使用
以为例，安装插件即可使用，如果想自定义配置，可以cmd+,快捷键进入配置，搜索找到对应的配置项进行配置。
是一个在 代码中通过规则模式匹配作代码识别和报告的插件化的检测工具，它的目的是保证代码规范的一致性和及时发现代码问题、提前避免错误发生。 的关注点是代码质量，检查代码风格并且会提示不符合风格规范的代码。除此之外 也具有一部分代码格式化的功能。
安装依赖，方便起见，直接使用已有的配置，这里使用的是
yarn add @umijs/fabric -D
根目录下新建..js，配置如下
module.exports = {extends: [require.resolve('@umijs/fabric/dist/eslint')],globals: {},plugins: ['react-hooks'],rules: {'no-restricted-syntax': 0,'no-param-reassign': 0,'no-unused-expressions': 0,},
};重启编辑器，即可应用的配置。
总结
到目前为止，我们搭建了一个简易的react脚手架，并且它支持、、HMR等特性，对于一个小项目来说已经足够用了，大家可以在此基础上进行扩展。
注意：安装时要注意是否安装成功，最终配置可以看源码；
Git源码地址
