之前入行前端系统学习过 Webpack，那时候的版本是 4，当时对 Webpack 的印象就是简单，但绝不易上手，尤其是应用到项目中，各种插件眼花缭乱，心都碎了一地。
现在 Webpack 升级到 5 了，里面内置了很多的插件，但是也还是做不到零配置。
对于这种脚手架，我理想的是，应该少配置，甚至做到零配置，用起来简单的就像在 HTML 中引入 JQuery 一样。
Vite 加油！
之前写过 React 配合 Webpack4 实现 hello world，感兴趣的可以看看。
项目目录结构
├── package.json
├── public
│ └── tpl
│ └── index.html
├── readme.md
├── src
│ └── index.tsx
├── tsconfig.json
└── webpack-config
├── webpack.base.config.js
├── webpack.config.js
├── webpack.dev.config.js
└── webpack.prod.config.js
webpack.base.config.js 也可以叫 webpack.common.config.js 如果感觉名字太长的话，可以把 config 的字段去掉，即：
xxxxx
└── webpack-config
├── webpack.common.js
├── webpack.config.js
├── webpack.dev.js
└── webpack.prod.js
动手实现
项目初建
初始化文件，和安装依赖（后面会单独把 package.json 文件的关键信息放出来）：
$ npm init -y # 初始化 package.json
$ npm install webpack webpack-cli webpack-dev-server -D
安装完这些，我们还需要一些 Webpack 插件，来辅助我们搭建项目，继续安装：
npm install webpack-merge html-webpack-plugin -D
看下 package.json 的依赖，都是基于最新版：
{
"devDependencies": {
"html-webpack-plugin": "^5.3.1",
"webpack": "^5.35.1",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
}
}
public/tpl/index.html 的文件内容（主要是放置一个容器标签）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello TypeScript</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
入口 index.js 文件（让页面显示一个 hello demo）：
document.getElementById("root").innerHTML = "Hello TypeScript!";
webpack.base.config.js 文件（公用的基础配置）：
[name][chunkhash:8] 的用法参考 template-strings
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
filename: "[name][chunkhash:8].js"
},
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"]
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/tpl/index.html"
})
]
}
dev 环境下的个性配置，开启了 source-map 便于调试，参见 devtool：
module.exports = {
devtool: "eval-cheap-module-source-map"
};
prod 环境下的个性配置：
Webpack4 我们清空目录使用的插件是 clean-webpack-plugin 现在 Webpack 已经内置了，参见： outputclean
module.exports = {
output: {
clean: true
}
}
package.json 的 scripts 字段新增内容如下：
{
"scripts": {
"start": "webpack serve --mode=development --config ./webpack-config/webpack.config.js",
"bulid": "webpack --mode=production --config ./webpack-config/webpack.config.js"
},
}
注意⚠️，webpack-dev-server 在五里面的命令改了，用 webpack serve 来替代 webpack-dev-server 了。
最后：
npm run start
浏览器打开 http://localhost:8080/ 即可看到：
增加 TS 和 React
还需要安装一些依赖：
$ npm install react react-dom
$ npm install -D typescript ts-loader @types/react @types/react-dom
依赖文件被更新为：
{
"devDependencies": {
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"html-webpack-plugin": "^5.3.1",
"ts-loader": "^9.1.1",
"typescript": "^4.2.4",
"webpack": "^5.35.1",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
用 TS 需要有一个配置文件，package.json 在添加一个脚本命令：
{
"scripts": {
"start": "webpack serve --mode=development --config ./webpack-config/webpack.config.js",
"bulid": "webpack --mode=production --config ./webpack-config/webpack.config.js",
"ts:init": "tsc --init"
}
}
运行 npm run ts:init 命令，项目根目录会出现 tsconfig.json 文件，因为项目会用到 jsx 语法和操作 DOM ，所以确认 tsconfig.json 的 lib 和 jsx 字段正确使用，例如。
{
"compilerOptions": {
"lib": ["DOM"],
"jsx": "react-jsx"
}
}
webpack.base.config.js 需要做些改变，更改入口文件和 loader :
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "[name][chunkhash:8].js"
},
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"]
},
module: {
rules: [
{
test: /tsx?$/i,
loader: "ts-loader",
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/tpl/index.html"
})
]
}
src/index.js 需要重命名为 src/index.tsx，文件内容变更为：
import * as React from "react";
import { render } from "react-dom";
interface Iprops {
children: string;
}
function App (props: Iprops) {
return (
<>
<h1>{props.children}</h1>
</>
)
}
render(<App>hello TypeScript!</App>, document.getElementById("root"));
npm run start 重启服务，浏览器完美运行:
当然事情可能不是那么的顺利，比如我就意外的收到了下面三个警告⚠️。
根据提示可以知道，项目的 code-splitting 和 performance 有带优化，code-splitting 是 Webpack4 的内容，参考链接 splitchunksplugin 性能的问题，可以参考 performance 来配置。
module.exports = {
optimization: {
splitChunks: {
chunks: "all",
// maxSize 每个包的最大 250000 字节
maxSize: 250000,
}
},
performance: {
hints: "error",
// 打包之后的文件的大小超过 250000 字节报错提示
maxAssetSize: 250000,
// 首次加在文件的大小
maxEntrypointSize: 400000,
}
};
Webpack5 搭建一个简易的 React+TS 开发环境的教程就写完了，不知道你发现没 Webpack5 相对于 Webpack4 智能，又内置了好多社区插件，再给你举个例子🌰：
如果你使用过 Webpack 配置过项目，你一定知道
-
raw-loader：内联资源，允许将文件处理成一个字符串内联 -
file-loader：将文件打包导到输出目录，并在 import 的时候返回一个文件的 URI
url-loader：当文件大小达到一定要求的时候，可以将其处理成 base64 的 URIS ，内置 file-loader。
这三个处理静态资源的 loader。我这一说，你就该猜到了，没错 Webpack5 也给内置了。具体的使用参考
简单介绍下，我们找张 earth-girl.png 的图片来实战。
启用 loader 是使用 type 字段进行配置的，webpack.base.config.js 的 module 需要新增规则
module.exports = {
module: {
rules: [
{
test: /\.png$/i,
type: "asset/resource"
},
{
test: /\.tsx?$/i,
loader: "ts-loader",
exclude: /node_modules/
}
]
}
};
index.tsx 插入 img 标签：
import * as React from "react";
import { render } from "react-dom";
import earthGirl from "./earth-girl.png";
interface Iprops {
children: string;
}
function App (props: Iprops) {
return (
<>
<h1>{props.children}</h1>
<img src={earthGirl} alt="earth-girl.png"/>
</>
)
}
render(<App>hello TypeScript!</App>, document.getElementById("root"));
这时候会编译错误，这是因为 TS 无法识别 png 文件，所以现在需要在项目根目录新建 custom.d.ts 文件内容为：
declare module "*.png";
重启服务，打开浏览器，啦啦啦图片出来了：
今天就介绍到这里了，更多 Webpack 内容请去 Webpack 官网学习 https://webpack.js.org/
完～
当前时间 Monday, April 26, 2021 17:58:27
