webpack5- js处理

Eslint:js检查工具Eslint

---

1.配置文件

配置文件有多种：

• .eslintrc.* (.eslintrc,.eslintrc.js,.eslintrc.json)
• package.json文件里的eslintConfig字段指定配置

2.具体配置 （.eslintrc.js配置文件为例）

module.exports = {
	root:true, //停止在父级目录中寻找
	//解析器选项
	parserOptions:{
		ecmaVersion: 6,//ECMAScript 版本
		sourceType:'module',// ES 模块化
		ecmaFeatures:{ // ES 其他特性
			globalReturn: true,//允许在全局作用域下使用 return 语句
			impliedStrict: true,//启用全局 strict mode
			jsx: true,//启用 JSX
		}
	}
	//具体检查规则 [规则文档](https://eslint.bootcss.com/docs/rules/)
	/*
		"off" 或 0 - 关闭规则;
		"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
		"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
	*/
 	rules: {},

	//继承其他规则
	extends:[]
}

3.在webpack中配置

const ESLintWebpackPlugin = require("eslint-webpack-plugin");

new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    })

4…eslintignore： Eslint 忽略文件

babel处理

---

1.下载包

npm i babel-loader @babel/core @babel/preset-env  core-js -D

2.配置文件

配置文件有多种：

• babel.config.*
  • babel.config.js
  • babel.config.json
• .babelrc.*
  • .babelrc
  • .babelrc.js
  • .babelrc.json
• packae.json配置babel字段

3.配置（babel.config.js）

module.exports = {
  presets: ["@babel/preset-env"],
   // 按需加载core-js的polyfill
      { 
      	useBuiltIns: "usage", 
      	corejs: { 
      		version: "3",
      		 proposals: true
      	 } 
      	}
};

在webpack中

{
       test: /\.js$/,
       exclude: /node_modules/, // 排除node_modules代码不编译
       loader: "babel-loader",
     },

压缩js

---

optimization: {
   minimizer: [
     new TerserPlugin({
       parallel: true,
       terserOptions: {
         // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
       },
     }),
   ],
 }

js优化 optimization.splitChunks

---

optimization:{
	
}