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

本文从空文件夹开始搭建react运行环境，涉及到css，sass，tsx，ts，jpg文件的解析

开始：

新建一个空文件夹,安装webpack的依赖

npm i webpack webpack-cli -D

新建基本文件

新建了一个index.js,里面的内容是简单的箭头函数

const add = (a, b) => {
	return a + b;
}

console.log(add(1, 2));

下面来用webpack编译这个项目

在根目录新建webpack配置文件webpack.config.js

const path = require("path");

module.exports = {
	entry: {
		hello: "./src/index.js",
	},
	output: {
		filename: "[name].js",
		path: path.join(__dirname, "dist"),
	},
};

编译

npx webpack

编译成功。webpack提醒我们没有设置mode，否则会给默认值production。待会我们暂且设置为production生成了一个在dist下面的文件hello.js内容为

(()=>{"use strict";console.log(3)})();

非常简洁

添加与ts相关的功能

安装依赖

npm i typescript ts-loader -D

typescrit是ts的基本依赖，ts-loader为的是给webpack添加解析ts文件的能力

typescript也是放在devDependencies里面，ts只在开发有用

生成ts的配置文件

npx tsc -init

成功

编写ts文件

将index.js改成index.ts文件

const add = (a: number, b: number) => {
	return a + b;
}

console.log(add(1, 2));

给add函数的参数添加了类型定义

编写webpack配置文件

const path = require("path");

module.exports = {
	entry: {
		hello: "./src/index.ts", //入口也要修改
	},
	output: {
		filename: "[name].js",
		path: path.join(__dirname, "dist"),
	},
	//添加的部分
	module: {
		rules: [
			{
				test: /\.ts$/,
				use: {
					loader: "ts-loader"
				},
			},
		],
	},
	mode: "production",
};

添加了编译ts文件功能的部分，用ts-loader来进行编译，并且会依据tsconfig.json来进行

编译

npx webpack

成功

生成hello.js内容和之前一致，下面就不贴图了😄

添加React功能

安装依赖

npm i react react-dom

npm i @types/react @types/react-dom -D

编写代码文件

将index.ts改成index.tsx

import { createRoot } from "react-dom/client";

const App = () => {
	return <div>hello 慢功夫</div>;
};

const root = createRoot(document.getElementById("root")!);
root.render(<App />);

修改tsconfig.json，添加

compilerOptions: {
	"jsx": "react-jsx",
}

jsx的值可以为preserve 、react-native、 react-jsx、react-jsxdev。每种值的效果不同，留待其他文章详述

当jsx的值设为react-jsx, *.tsx文件中就不用引入React。如果有相关的eslint报错，可以将该报错关闭。

添加模版文件

index.html添加htmlwebpackplugin依赖，让编译好的js文件自动注入html文件中

npm i html-webpack-plugin -D

编写webpack配置文件

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",
          options: {
            // transpileOnly: true,
          },
        },
      },
    ],
  },
  //添加了一个插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
  mode: "production",
};

编译

npx webpack

成功

在浏览器中打开index.html

只用ts-loader就完成了react代码的编译，并没有用到babel，神奇吧😃

添加解析样式文件的功能

安装依赖

npm i sass sass-loader css-loader style-loader -D

1. sass是sass功能的依赖库
2. sass-loader是提供给webpack解析sass语法成普通css语法的能力
3. css-loader是用于解析css文件，将css翻译成形如module.export = ${css}的js代码，让webpack能够像处理js代码一样处理css代码
4. style-loader会在项目运行的时候，将css代码注入页面的标签中，即源文件看不到中的样式代码，只在运行的页面中可以看到

编写代码文件

添加.index.scss

.app {
  background-color: cyan;
}

修改.index.tsx文件

import "./index.scss";
const App = () => {
	return <div className='app'>hello 慢功夫</div>; //此处修改
};

编写webpack配置文件

module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: {
					loader: "ts-loader",
				},
			},
      //添加解析样式文件的功能
			{
				test: /.s?css$/,
				use: ["style-loader", "css-loader", "sass-loader"],
			},
		],
	},

编译

npx webpack

成功

添加解析图片的功能

在webpack4中，处理图片的loader有三种，

1. file-loader, 它会将图片复制至构建目录中，并且在代码中插入图片的url
2. url-loader, 它会将size小于某个大小的图片转换成base64编码，其他的则用file-loader加载。通过url-loader可以将许多细小的图片直接放入代码，减少页面渲染的时候发出的http请求
3. raw-loader，它直接将文件的内容复制到产物中，适用于svg场景

在webpack5中，这些功能使用频率极高，几乎成为了标配组件，所以webpack5直接将其内置，不需要额外下载依赖包。

编写代码文件

添加图片引入图片

//index.tsx

import { createRoot } from "react-dom/client";
import "./index.scss";
import catImg from "../assets/cat.jpg";
const App = () => {
	return (
		<div className='app'>
			hello 慢功夫
			<p>小猫的图片</p>
			<img src={catImg} style={{ height: "200px" }} />
		</div>
	);
};

修改webpack配置

module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: {
					loader: "ts-loader",
					options: {
						transpileOnly: true,
					},
				},
			},
			{
				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", //url-loader
				parser:{
					dataUrlCondition:{
						maxSize: 1024 
					}
				}
			},
			{
				test: /\.(jpg|png|jpeg)$/i,
				type: "asset/source", //raw-loader
			}
		],
	},

如果不小心引入图片过大，会有性能提示在配置中关掉性能提示就好

{
  performance: {
		// 关闭性能提示
		hints: false,
	},
}

编译

npx webpack

成功

添加热部署功能

安装依赖

npm i webpack-dev-server -D

编写webpack配置文件

devServer: {
		static: {
			directory: path.join(__dirname, "public"),
		},
		compress: true,
		port: 9000,
		open: true,
},

该配置会在本地开启一个服务器，我们修改代码保存之后，就可以实时地体现在页面上，而不用反复的build了。static：配置本地服务的静态目录compress： 是否启用gizp压缩，默认打开port：设置服务器启动的端口号：默认8080open：是否在项目启动的时候自动打开浏览器，默认false

更详细的serve配置可以看这篇文章：

启动服务器

npx webpack serve

成功

可以修改修改代码，看页面是否会自动呈现修改后的样式

修改package.json, 方便命令化操作

"scripts": {
  "start": "webpack serve",
  "build": "rm -rf ./dist && webpack"
},

当我们要启动本地服务器做开发的时候，就可以输入 npm start。当我们想要构建项目的时候，就可以输入npm run build

总结：

好了，基本的react环境搭建出来了。可以在这个环境中进行各种react api测试.除此之外，这个架子还有一些问题，比如打包速度太慢, 没有区分开发环境和生产环境等等，这些之后再加上。