Mahiru's Humble Abode       博  客   时 间 线   归  档   关 于 与 友 链



Webpack 搭建 React + TS 环境
Published on Sun May 29 2022 18:30:00 GMT+0000

Webpack 基础配置

初始化，安装依赖

最终得到：
package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "name": "webpack",
  "version": "1.0.0",
  "main": "src/main.tsx",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack serve --open --config webpack.dev.js"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "ts-loader": "^9.3.0",
    "typescript": "^4.7.2",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  }
}

编写 webpack.common.js 作为主要配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 生成随机字符串，用于区分打包产物
const bundle_random_str = Math.random().toString(36).slice(-6);

module.exports = {
    // 入口
    entry: {
        index: './src/main.tsx'
    },
    // 出口
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: `assets/[name].${bundle_random_str}.bundle.js`,
    },
    // 对于各个模块的规则
    module: {
        rules: [
            // JavaScript
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },
            // css
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            // ts
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ]
    },
    plugins: [
        // 打包前清理
        new CleanWebpackPlugin(),
        // 打包时处理HTML
        new HtmlWebpackPlugin({
            title: 'Webpack Test',
            template: path.resolve(__dirname, './public/index.html'),
            filename: 'index.html',
        }),
        // 打包成css
        new MiniCssExtractPlugin({
            filename: `assets/style.${bundle_random_str}.css`
        }),
    ],
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    }
}

在index中引入 Webpack 变量的方法

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>

编写开发环境配置文件

webpack.dev.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require("path");

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    // 启用devServer
    devServer: {
        static: {
            publicPath: path.join(__dirname, 'public')
        },
        hot: true,
        compress: true,
        port: 3000,
    },
});

编写生产环境配置文件

webpack.prod.js

1
2
3
4
5
6
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
});

配置 TS Babel

配置TS

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "compilerOptions": {
    "outDir": "./dist/",
    // "rootDir": "./src",
    "sourceMap": true, // 开启sourcemap
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "esModuleInterop": true,
    "allowJs": false,
    "strict": true
  }
}

配置 Babel

babel.config.json

1
2
3
{
    "presets": ["@babel/preset-env"]
}