手动搭建React Mobile项目脚手架--webpack5

代码地址

webpack版本5.70.0

1 bebal配置

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript @babel/preset-react

@babel/cli
@babel/core
@babel/preset-env	设置babel转换的目标浏览器
@babel/preset-typescript	ts转换
@babel/preset-react	处理jsx语法
babel-loader	处理jsx语法

1.1 根目录创建babel.config.json

{
    "presets": [
        "@babel/preset-env",
         "@babel/preset-typescript",
         "@babel/preset-react"
    ]
}

1.2 在webpack.config.js babel配置中添加

{
						test: /\.(js|mjs|jsx|ts|tsx)$/,
						// include: [srcPath],
						exclude: /node_modules/,
						loader: "babel-loader",
						options: {
							presets: [
								[
									"@babel/preset-env",
									{
										useBuiltIns: "usage",
										corejs: { version: 3 },
										targets: {
											chrome: "60",
											firefox: "50",
										},
									},
								],
							],
							cacheDirectory: true, //这会将转译的结果缓存到文件系统中
							cacheCompression: false,
						},
					},

presets配置必须加，不然无法处理jsx语法 （TODO 为啥在bable配置文件里面加了这里还要加）

2 webpack配置

npm install --save-dev webpack webpack-cli webpack-dev-server 

webpack
webpack-cli
webpack-dev-server	开发环境本地开启node服务

2.1 webpack-dev-server在webpack.config.js babel配置

devServer: {
		static: "./static", //指定热更新目录
		open: true, //打开浏览器
	},

3 css-loader配置

npm install --save-dev style-loader css-loader  postcss-loader postcss-preset-env postcss-flexbugs-fixes postcss-normalize

style-loader	把 CSS 插入到 DOM 中。
css-loader
postcss-loader	使用 PostCSS 处理 CSS 的 loader
postcss-preset-env
postcss-flexbugs-fixes
postcss-normalize

3.1webpack.config.js 配置

		{
			loader: require.resolve("css-loader"),
			options: {
				...cssOptions,
				modules: {
					auto: /(?<![\\/]src[\\/]styles[\\/]\w*)\.scss$/,
					localIdentName: "[path][name]-[local]",
				},
			},
		},
		{
			loader: "postcss-loader",
			options: {
				postcssOptions: {
					plugins: [
						[
							"postcss-flexbugs-fixes",
							require("postcss-preset-env")({
								autoprefixer: {
									flexbox: "no-2009",
								},
								stage: 3,
							}),
							postcssNormalize(),
						],
					],
					sourceMap: isEnvProduction ? true : false,
				},
			},

4 sass配置

npm install --save-dev sass sass-loader  sass-resources-loader

sass
sass-loader
sass-resources-loader

4.1webpack.config.js 配置

{
						test: sassRegex,
						exclude: sassModuleRegex,
						use: [
							...getStyleLoaders(
								{
									importLoaders: 3,
									sourceMap: isEnvProduction ? true : false,
								},
								"sass-loader"
							),
							{
								loader: "sass-resources-loader",
								options: {
									resources: [
										`${srcPath}/styles/variables.scss`,
									],
								},
							},
						],
						sideEffects: true,
					},

5 url-loader配置

npm install --save-dev url-loader

5.1 webpack.config.js 配置

                   {
						test: [/\.avif$/],
						loader: "url-loader",
						options: {
							limit: imageInlineSizeLimit,
							mimetype: "image/avif",
							name: "static/media/[name].[hash:8].[ext]",
						},
					},
					{
						test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
						loader: "url-loader",
						options: {
							limit: imageInlineSizeLimit,
							name: "static/media/[name].[hash:8].[ext]",
						},
					},

6 打包优化

npm install --save-dev terser-webpack-plugin  optimize-css-assets-webpack-plugin postcss-safe-parser

6.1 webpack.config.js 配置

//TODO 后续更新

// github Demo代码关闭，需要的私聊或者留言

后续我会持续优化更新这个脚手架和文章