毫无废话，webpack手动搭建React+TS运行环境-2

慢功夫
130 阅读3分钟

上篇文章讲了搭建一个相对完善的webpack开发环境，虽说用来开发是够了，但仍比较简易和基础。

传送门：没有废话，webpack手动搭建React+Typescript运行环境

这篇文章我们来给这个环境添加更多的功能

添加external，提升构建速度，很明显

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。

也就是说，使用了externals，构建时不会把被排除的依赖打包进去。这样做的好处就是减少了打包的代码，对构建的速度提升非常明显，但如果直接运行构建后的文件会报错。

举个例子：如果把react，或者lodash排除出去，运行的时候就会报找不到react或者lodash的相关错误。一般这时候会根据情况，有两种处理办法

  1. 如果构建的文件是作为其他项目的依赖，那执行构建文件的时候，就会去依赖其他项目环境中的react，lodash，不会产生错误
  2. 如果构建的文件，是作为独立的项目执行，那么就需要自己手动在html中导入CDN的依赖了

下面来看看怎么做

修改webpack.config.js配置文件

module.exports = {
  //...
  externals: {
        react: "React",
        "react-dom": "ReactDOM",
    },
  //...
}

这里将react和react-dom最常用的，也是比较大的依赖external出去

然后在模版文件中引入react，react-dom的CDN

<head>
     <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>

代码准备好了，我们来看看打包速度对比

效果还是很明显的

给常用的文件夹添加Alias

应网友--的建议，加上这一功能，这功能还是很好用的

创建 import 或 require 的别名，来确保模块引入变得更简单。具体规则可以看这篇文章：解析(Resolve) | webpack 中文文档 下面来看具体例子

修改webpack.config.js配置文件

module.exports = {
  //...
  resolve: {
        extensions: [".tsx", ".ts", ".js", ".jsx"],
        alias: {
            utils: path.resolve(__dirname, "./src/utils"),
            src: path.resolve(__dirname, "./src"),
        },
    },
  //...
}

新建了两个alias，utils和src。当我们在引用utils里的文件时，相对路径就可以改成alias路径了

import add from "./utils/add";

//改成
import add from "utils/add";

不过这里会有一个问题，就是TS并不认识这个alias，找不到add，也就无法获取add的类型，所以会报错

image.png

我们需要在tsconfig.json中做些修改

"compilerOptions":{
  "baseUrl": "./",
  "paths": {
    "utils/*": [
      "src/utils/*"
    ],
    "src/*": [
      "src/*"
    ]
  }
}

如果报错的提示是来自eslint，那就需要在eslint做些配置修改了

完整代码

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    hello: "./src/index.tsx",
  },
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "ts-loader",
        },
      },
      {
        test: /.s?css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(jpg|png|jpeg)$/i,
        type: "asset/resource", //file-loader
      },
      {
        test: /\.(jpg|png|jpeg)$/i,
        type: "asset/inline",
        parser: {
          dataUrlCondition: {
            maxSize: 1024, //url-loader
          },
        },
      },
      {
        test: /\.(jpg|png|jpeg)$/i,
        type: "asset/source", //raw-loader
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
  mode: "production",
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    compress: true,
    port: 9000,
    open: true,
  },
  performance: {
    // 关闭性能提示
    hints: false,
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx"],
    alias: {
      utils: path.resolve(__dirname, "./src/utils"),
      src: path.resolve(__dirname, "./src"),
    },
  },
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
  cache: {
    type: "filesystem",
  },
};

总结

这篇文章是承接上篇基础文章没有废话，webpack手动搭建React+Typescript运行环境而写的，加了两个功能，一个externals，加快了打包速度；一个是alias，方便开发写代码。

jym还有其他要加的功能吗，可以留言告诉我，本人长期活跃在掘金😄

avatar
文章
阅读
粉丝