文章目录
- 前言
- eslint
- 安装
- 配置
- 设置规则
- devtool设置js.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等
module.exports = {devServer: {open: true, // 项目启动后默认打开网址port: 8081, // 端口号proxy: { // 代理请求服务'/api': { // 识别符号target: 'https://mock.mengxuegu.com/mock/64cc976f686aea63fd6b58d9/ui-collection', // 替换的目标地址pathRewrite: { // 这里可以把地址修改// 去掉api'^/api': '/',},},},server: 'https', // 强行用https请求，慎用}
}
)
