Webpack5 搭建一个简易的 React+TS 开发环境

Posted 2023-04-28

参考技术A

之前入行前端系统学习过 Webpack，那时候的版本是 4，当时对 Webpack 的印象就是简单，但绝不易上手，尤其是应用到项目中，各种插件眼花缭乱，心都碎了一地。

现在 Webpack 升级到 5 了，里面内置了很多的插件，但是也还是做不到零配置。

对于这种脚手架，我理想的是，应该少配置，甚至做到零配置，用起来简单的就像在 html 中引入 JQuery 一样。

Vite 加油！

之前写过 React 配合 Webpack4 实现 hello world ，感兴趣的可以看看。

webpack.base.config.js 也可以叫 webpack.common.config.js 如果感觉名字太长的话，可以把 config 的字段去掉，即：

初始化文件，和安装依赖（后面会单独把 package.json 文件的关键信息放出来）：

安装完这些，我们还需要一些 Webpack 插件，来辅助我们搭建项目，继续安装：

看下 package.json 的依赖，都是基于最新版：

public/tpl/index.html 的文件内容（主要是放置一个容器标签）：

入口 index.js 文件（让页面显示一个 hello demo）：

webpack.base.config.js 文件（公用的基础配置）：

[name][chunkhash:8] 的用法参考 template-strings

dev 环境下的个性配置，开启了 source-map 便于调试，参见 devtool ：

prod 环境下的个性配置：

Webpack4 我们清空目录使用的插件是 clean-webpack-plugin 现在 Webpack 已经内置了，参见： outputclean

package.json 的 scripts 字段新增内容如下：

最后：

浏览器打开 http://localhost:8080/ 即可看到：

还需要安装一些依赖：

依赖文件被更新为：

用 TS 需要有一个配置文件，package.json 在添加一个脚本命令：

运行 npm run ts:init 命令，项目根目录会出现 tsconfig.json 文件，因为项目会用到 jsx 语法和操作 DOM ，所以 确认 tsconfig.json 的 lib 和 jsx 字段正确使用 ，例如。

webpack.base.config.js 需要做些改变，更改入口文件和 loader :

src/index.js 需要重命名为 src/index.tsx ，文件内容变更为：

npm run start 重启服务，浏览器完美运行:

当然事情可能不是那么的顺利，比如我就意外的收到了下面三个警告⚠️。

根据提示可以知道，项目的 code-splitting 和 performance 有带优化，code-splitting 是 Webpack4 的内容，参考链接 splitchunksplugin 性能的问题，可以参考 performance 来配置。

Webpack5 搭建一个简易的 React+TS 开发环境的教程就写完了，不知道你发现没 Webpack5 相对于 Webpack4 智能，又内置了好多社区插件，再给你举个例子🌰：

如果你使用过 Webpack 配置过项目，你一定知道

这三个处理静态资源的 loader。我这一说，你就该猜到了，没错 Webpack5 也给内置了。具体的使用参考

简单介绍下，我们找张 earth-girl.png 的图片来实战。

启用 loader 是使用 type 字段进行配置的， webpack.base.config.js 的 module 需要新增规则

index.tsx 插入 img 标签：

这时候会编译错误，这是因为 TS 无法识别 png 文件，所以现在需要在项目根目录新建 custom.d.ts 文件内容为：

重启服务，打开浏览器，啦啦啦图片出来了：

今天就介绍到这里了，更多 Webpack 内容请去 Webpack 官网学习 https://webpack.js.org/

完～

TypeScript + Webpack 环境搭建

TypeScript + Webpack 环境搭建步骤

1. 安装Node.js
2. 安装npm
3. 创建一个npm项目
4. 安装typescript，配置ts
5. 安装webpack，配置webpack

初始化一个npm项目

npm init

将在项目根目录下创建package.json文件。文件目录结构如下

ts3-demo
|- src
  |- index.ts
|- package.json

全局安装typescript命令：

npm install -g typescript

可以使用以下命令来查看你的机器中是否安装了Node.js npm  typescript，以及安装的版本。

node -v
npm -v
tsc -v

typescript compiler

typescript的编译器叫做 tsc。

假设有个src/index.ts 文件，将它编译成index.js，可以使用命令：

tsc src/index.ts --target es5 
或者
tsc src/index.ts --target es3

启动观察模式，当ts文件更改之后，自动进行编译。

tsc src/index.ts --watch --target es5

// index.ts
export default class Index {
    title = ‘Hello‘;
    name = ‘Lori‘;    
}

编译后结果

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Index = /** @class */ (function () {
    function Index() {
        this.title = ‘Hello‘;
        this.name = ‘Lori‘;
    }
    return Index;
}());
exports.default = Index;

通常不会在terminal中敲命令来编译，而是在项目的根路径下，建一个json配置文件 tsconfig.json，来配置这些编译选项。

初始化tsconfig.json的命令：

tsc --init

然后在terminal中使用tsc命令，会发现项目中所有ts文件都被编译成了js文件。

tsc

配置tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

安装Webpack

npm install webpack webpack-cli --save-dev

安装ts-loader

npm install ts-loader --save-dev

安装Webpack插件 html-webpack-plugin

用于自动生成index.html文件。

npm install html-webpack-plugin --save-dev

配置webpack.config.ts

const path = require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
    mode: "development",
    devtool: "inline-source-map", 
    entry: "./src/index.ts",
    output: {
        path: __dirname + ‘/dist‘,
        filename: ‘[name].bundle.js‘
    },
    resolve: {
        extensions: [‘.ts‘, ‘.tsx‘, ‘.js‘]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: ‘index‘
        })
    ],
    module: {
        rules: [
            {
                test: /.tsx?$/,
                use: ‘ts-loader‘,
                exclude: /node_modules/
            }
        ]
    },

    devServer: {
        contentBase: path.join(__dirname, ‘dist‘), 
        compress: true, 
        historyApiFallback: true, 
        hot: true,
    }
}

想要在debug时生成相应的map文件，注意两点：

1. tsconfig.json 中 sourceMap 设置为 true
2. webpack.config.ts中 devtool: "inline-source-map"

配置package.json 添加命令

"scripts": {
    "start": "./node_modules/.bin/webpack-dev-server",
    "build": "./node_modules/.bin/webpack",
    "test": "echo "Error: no test specified" && exit 1"
  },

运行npm run build 进行编译。

文件目录结构如下

ts3-demo
|-dist
  |- index.html
  |- main.bundle.js
|- src
  |- index.ts
|- package.json
|- tsconfig.json
|- webpack.config.js

运行npm start 启动本地服务器。