【webpack】一些零碎的知识点记录：eslint配置、source-map配置、devServer配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了【webpack】一些零碎的知识点记录：eslint配置、source-map配置、devServer配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

有些知识点不知道咋归类，就先暂时放在同一个文章里了。这里只记录配置方式，配置的东西是什么就不过多解释了，因为一般需要配置这些东西的也都了解是什么了。

eslint

一般在用cli创建vue工程或者cra创建react工程的时候，会默认帮你安装，webpack会自动帮你配置好，我也比较推荐这种形式。

但是要是没有也没关系，自己重新添加即可。

安装

npm i eslint-loader eslint -D

同时还需要一个代码规范库，这里例子选用airbub，我们选择不包含react规范的eslint-config-airbub-base，这个库也需要另外的插件支持eslint-plugin-import。

npm i eslint-config-airbub-base eslint-plugin-import -D

配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/, // 排除对第三方库的检查
				loader: 'eslint-loader',
				options: {
					fix: true, // 开启自动修复
				}
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html' 
		})
	]
}

设置规则

可以在package.json中eslintConfig中设置：

{
	"eslintConfig" : {
		"extends": "airbub-base" // 继承我们安装的airbub
	}
}

devtool设置js.map文件

这是啥就不解释了

使用

module.exports = {
	devtool: 'source-map'
}

模式解释

可以配置很多种模式，但我只记录我认为有用的模式，不增加心智负担

source-map：生成js.map文件，让压缩后的代码在控制台查看起来和源码差不多，方便定位问题
nosources-source-map：生成js.map文件，此时如果报错了，只会和你说在源码哪个位置报错（类似index.js7:2），但是你无法查看代码文件，因为map文件不给你看。

不写devtool，直接就不生成map文件了

文件说明

js.map文件一般都是很大的，因为你的工程代码量很多，但有些东西是固定的，可以说说：

内容整理来自https://www.python100.com/html/4WMO9FF4328L.html

{
  "version": 3, // 指定map文件版本
  "file": "script.min.js", // 压缩后的代码文件名
  "sourceRoot": "", // 源文件的根路径
  "sources": [ // 压缩前的文件名数组，用来指定map文件中各个部分对应的源代码
    "script.js"
  ],
  "names": [], // 指定各个变量和函数名的数组。这在调试的时候可以通过map来查看变量和函数名称
  "mappings": ";;AAAA,GAAIA,IAAIC,MAAY,CAAZ,KAAK,EAAE;CCAgBF,EAAE,KAAK", // 压缩后的代码和源代码对应的具体位置。这是一个非常复杂的字符串，它通过映射的方式来指定压缩后的代码和原始代码之间的对应关系
  "sourcesContent": [ // 每个文件的原始代码
    "console.log(\"hello world\");"
  ]
}

了解就行了，一般也不会去细看map文件

建议方案

我的建议是开发环境开启，但生产环境为了代码安全，还是选择关闭。

但是咧，这样排查生产环境问题就会很麻烦了，难以定位到错误，所以生产的要单独一个方案处理。

我看到的基本都是采用监控的方式，可以看看这篇文章：生产上的问题你不会用 sourcemap 定位吗？

devServer

一般在用cli创建vue工程或者cra创建react工程的时候，会默认帮你安装，webpack会自动帮你配置好，我也比较推荐这种形式。

但是要是没有也没关系，自己重新添加即可。

安装

npm i webpack-dev-server

配置

一些默认就配置的很好的功能就不记录了，例如热刷新hot、开启gzip压缩compress等文章来源地址https://www.toymoban.com/news/detail-640291.html

module.exports = {
	devServer: {
		open: true, // 项目启动后默认打开网址
		port: 8081, // 端口号
	    proxy: { // 代理请求服务
	      '/api': { // 识别符号
	        target: 'https://mock.mengxuegu.com/mock/64cc976f686aea63fd6b58d9/ui-collection', // 替换的目标地址
	        pathRewrite: { // 这里可以把地址修改
	          // 去掉api
	          '^/api': '/',
	        },
	      },
	    },
	    server: 'https', // 强行用https请求，慎用
	  }
}