Loading

从“0”开始搭建Webpack5 + React17 开发环境 (二)

上文 写到搭建了一个最简陋的 Webpack5+React17 环境,这篇我准备将它优化一下

添加浏览器兼容(打包工作)

当开发完成后需要进行打包,如果不使用该工具,默认不翻译代码至指定平台(不考虑浏览器兼容性)

1.安装 @babel/preset-env

yarn add @babel/preset-env --dev

2.启用 babel 的 preset-env

位置:/.babelrc

{
  "presets": [
    "@babel/preset-env"
     // ...省略其他插件
  ]
}

3.配置 babel/preset-env

位置:/package.json

{
    //...前略
    "browserslist": "last 1 version" // 表示兼容到主流市场的上一级浏览器
}

添加代码格式校验

为了提高开发效率,我们需要整洁的代码,明确的错误提示。我们可以使用eslint 来规范代码。

1.安装Eslint

yarn add eslint --dev

2.进行初始化Eslint

 yarn run eslint --init

eslint

按照提示选择配置,最后会提示安装依赖,Yes即可

配置别名引入

位置:/webpack.config.js

 {
 	// 前后省略...
    resolve: {
    	// configuration options
        alias: {
            // 将@设置为 'yourProjectRoot/src' 绝对路径的别名
			'@': path.resolve(__dirname, 'src/'),
		},
	}
  }

添加包分析插件(可选)

1.分析打包文件

// webpack 分析插件
yarn add -D webpack-bundle-analyzer 
// windows 平台环境配置兼容工具
yarn add -D cross-env

2.加入插件

位置:/webpack.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
	//...其他配置省略
	plugins: [
        new BundleAnalyzerPlugin({
        	analyzerPort:9999
        })
    ],
}

3. 添加脚本

位置:/package.js

{
 "scripts": {
 	//... 前略
    "analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"
  },
}

4.进行分析

yarn analyze

参考文献

eslint官方文档

babel-preset-env官方文档

webpack-resolve说明

webpack-bundle-analyzer in github

posted @   ZJH_BLOGS  阅读(361)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· Java轻量级代码工程
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战
历史上的今天:
2020-04-26 yarn npm 镜像切换
2019-04-26 记录下(同一个计算机)多个容器 dockr bridge(桥接) docker-compose 配置
2016-04-26 高性能图片服务器–ZIMG
点击右上角即可分享
微信分享提示
主题色彩
蒸羊羔儿