webpack5 学习进阶：开发效率和代码规范

文章目录

学习可参考： webpack中文文档

一、source map

source map 是 devtool 上的配置信息，可以关联源代码 index.js 和打包后的 bundle,js 的报错信息；webpack 已经内置了 source map 的功能，我们只需要简单的配置一下就可以开启这个功能了；source map 分为如下几类：

1、关闭 source map

devtool:false

2、eval

在 mode 为 development 环境时， devtool 的默认值为 eval，每个 module 都会封装到 eval 里面包裹起来执行，并且会在末尾加上注释//# sourceURL=（指名eval前文件）；
源代码

//index.js
console.log('test webpack')

打包后

eval("console.log('test webpack')\r\n\n\n//# sourceURL=webpack://webpackLearn/./src/index.js?");

3、source-map

生成一个 SourceMap 文件；并在打包文件的末尾添加//# souceURL，注释会告诉 JS 引擎原始文件位置，功能比较全，但是打包比较慢；

//bundle.js
//# sourceMappingURL=bundle.js.map
//bundle.js.map
{
    
    "version":3,"file":"bundle.js","mappings":";;AAAA","sources":["webpack://webpackLearn/./src/index.js"],"sourcesContent":["console.log('test webpack')\r\n"],"names":[],"sourceRoot":""}

4、hidden-source-map

和 source-map 一样，但是不会在 bundle.js 后面追加注释；（无法帮助锁定代码行数）

5、inline-source-map

生成一个 DataUrl 形式的 SourceMap 文件；

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnVuZGxlLmpzIiwibWFwcGluZ3MiOiI7O0FBQUEiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly93ZWJwYWNrTGVhcm4vLi9zcmMvaW5kZXguanMiXSwic291cmNlc0NvbnRlbnQiOlsiY29uc29sZS5sb2coJ3Rlc3Qgd2VicGFjaycpXHJcbiJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==

它不会单独生成一个 map 文件打包出来，地址是一个包含一个文件完整 souremap 信息的 Base64 编码；

6、eval-source-map

每一个 module 都会通过 eval() 来执行，并且生成一个 DataUrl 形式的 SourceMap 文件；打包后代码是 eval 打包一样，只是地址变成 Base64 编码，也不会单独生成一个 map 文件；

7、cheap-source-map

会生成一个没有列信息的 SourceMap 文件，不包含 loader 的 SourceMap ；
整体跟 source-map 差不多，只是在 map 文件中的 mappings 中没有记录代码的列数；是 source-map 的简化版；

8、cheap-module-source-map（建议在开发环境使用）

会生成一个没有列信息的 SourceMap 文件，同时 loader 的 SourceMap 也会被简化为只包含对应行信息；它是 webpack 对 loader 生成的 sourcemap 进行简化，然后再次生成的;

注意：生成环境我们不建议开启 source map 功能，主要原因如下：
1、通过 bundle 和 sourcemap 文件，可以反编译出项目的源码，有暴露源码的风险；
2、sourcemap 文件的体积比较巨大，生产环境需要更小，更轻便的 bundle；
（官方文档：devtool）

二、devServer

开发环境下，我们往往需要开启一个 web 服务，方便我们模拟一个用户从服务器访问我们的 web 服务的场景，用来观察我们的代码在客户端的表现；webpack 内置了这样的功能，我们只需要简单的配置就可以开启；

1、安装

npm i webpack-dev-server -D

2、配置

const path = require('path')
module.exports = {
    
    
	mode:'development',
	entry:'./index.js',
	devServer:{
    
    
		static: path.resolve(__dirname,'./dist'),
		compress: true,
		port:9000,
		headers:{
    
    
			"X-Custom-Foo":"bar"
		},
		proxy:{
    
    
			'/api':{
    
    
				target:'http://localhost:9000', //代理的地址
				pathRewrite:{
    
    
				//可以去掉请求地址中的 'api',当实际需要请求的路径里面没有”/api“时. 就需要 pathRewrite,用’’^/api’’:’’, 把’/api’去掉, 
				//这样既能有正确标识, 又能在请求到正确的路径
					'^/api':''
				},
				secure:true //默认情况不接受运行在 https 上，如果想使用 https 的后端域名，可以开启这一项
			}
		},
		https:true,
		//https:{
    
    
		//	key:'',
		//	cert:'',
		//	ca:''
		//}
		http2:true,
		//historyApiFallback:true,
		historyApiFallback：{
    
    
			rewrites：[
				{
    
    from:/^\/$/,to:'/view/index.html'}
				{
    
    from:/./,to:'/view/404.html'}	
			]
		},
		host:'0.0.0.0'
	}
}

常见配置：

static：指向我们当前服务的物理路径；
compress：设置是不是在服务器端进行代码压缩（gzip 压缩），可以在传输过程中减少传输数据的大小（测试效果可以在浏览器 network all 查看 js 的 Response Header 里面的 Content-Encoding: gzip 是否存在，记得清缓存）；
port：指定要监听请求的端口号；
headers：在所有响应中添加头部内容；
proxy：开发环境下，代理其他服务器请求（后端接口地址），解决跨域问题；
https：默认情况下 dev-server 通过 HTTP 提供服务，想通过 HTTPS 提供服务的话直接传值 true；然后默认使用自签证书，浏览器会提示不安全，如果购买了第三方证书，可以在 https 对象内部配置使用；
http2：自带 HTTPS 的自签名证书，可以通过 https 来访问我们的项目；
historyApiFallback：在单页面应用中，使用 history 路由时，当页面找不到资源时会返回 404，可以通过这个参数让所有的 404 响应都被替换为 index.html；也可以通过 rewrites 配置不同的访问路径替换页面；
host：指定使用一个 host，默认是 localhost，如果你希望服务器外部可访问可以设置（这个 webpack 默认提供了，所以不用配置）；

三、模块热替换与热加载

1、模块热替换

模块热替换会在应用程序运行过程中，替换、删除、添加模块，而无需重新加载整个页面；可以实现页面的部分刷新；配置如下：

module.exports = {
	devServer:{
		hot:true
	}
}

对于 js 的变化我们需要额外设置一下，手动接收配置需要热替换的 js 模块；

if(module.hot){
	module.hot.accept('./index.js')
}

css 不需要这一步操作，因为 css-loader 已经帮助处理了；vue 框架中也不需要手动接收，因为 vue 内部也做了处理；

2、热加载

文件更新时，自动刷新我们的服务页面，新版的 webpack-dev-server 模式开启了热加载功能；如果想关掉它将 liveReload 设置为 false 的同时也需要关掉 hot ；

module.exports = {
	devServer:{
		liveReload:true
	}
}

四、ESLint

ESLint 是用来扫描代码是否符合规范的工具，严格来说 eslint 和 webpack 是无关的，但是在工程化的开发环境中，它又是不可或缺的；

1、安装

npm i eslint -D

2、创建配置文件

npx eslint --init

根据自己的项目需要选择一些配置，执行成功之后就会生成一个 .eslintrc.json 文件；

env：脚本的运行环境；
extends：扩展项
parserOptions：解析器参数
rules：规则
globals：执行脚本期间访问的额外全局变量

3、检查

npx eslint ./src

命令行检查代码会很麻烦，也可以在开发工具中安装 eslint 插件，当然不是所有的工具都提供了 eslint 插件，所以我们可以看看结合 webpack5 来检查代码：
安装

npm i eslint-webpack-plugin -D

安装成功之后在 webpack.config.js 中使用

const ESLintPlugin = require('eslint-webpack-plugin')
plugins:[
		new ESLintPlugin({
			fix:true //自动修复不合理的写法
		})
	]

如果想关闭浏览器遮罩层的报错，只是在控制台报错，可以执行如下配置：
在这里插入图片描述

devServer:{
		client:{
			overlay:false
		}
	},

五、Githooks-Husky

为了保证团队开发代码符合规范，我们可以在提交代码时对代码进行校验，我们经常会使用 husky 来协助对代码进行 eslint 校验；husky 是基于 git-hooks 来实现的；

1、git-hooks

首先保证自己的电脑上已经安装了 git ，不知道有没有的可以在控制台执行下面指令：

git --version

有返回 git 的版本号就说明已经安装了，没有返回或者报错则需要去安装 git；
1、初始化git

git init

初始化完成之后会生成一个隐藏的 .git 文件夹；
2、创建 .gitignore 文件，配置提交代码时不需要提交的文件；

**/node_modules

3、执行 git status 查看当前 git 的状态，如果有标红的文件名，说明这些文件都没有放到本地仓库中；这时候执行 git add . 然后执行 git commit -m"初次提交"将这些文件添加到本地仓库；
4、gitHooks 就是在 GIT 执行特定事件（commit 、push 、receive）后触发的脚本，hook 是放置在 hooks 目录下的程序；
5、自定义 hook 就是在 hooks 中新建一个 pre-commit 文件（这个文件没有后缀），里面执行命令 npx eslint ./src，然后在执行 git commit 命令行的时候就会运行这个命令；这也就可以在提交代码的时候进行代码校验了；

#!/bin/sh
npx eslint ./src

然后在提交 commit 的时候就会运行命令对代码进行校验；

2、husky

官网：https://typicode.github.io/husky/#/
1、安装

npm i husky -save-dev

2、启用 Git 挂钩

npx husky install

安装成功之后会在 .git 下面创建一个 .husky 文件夹；
3、配置脚本，在 package.json 中

scripts:{
	"prepare":"husky install"
}

让程序在执行我们的一些命令执行之前先安装 husky；
4、创建一个钩子，在根目录下执行下面命令

npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit

命令行我试了一下，不怎么好用；也可以手动创建文件，文件内容跟上面的一样；

#!/bin/sh
npx eslint ./src

然后在提交 commit 的时候就会运行命令对代码进行校验；