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