文件打包目录分类
随着打包生成的文件种类越来越多，发现他们已经毫无规律地堆放在了一起，不方便管理，那么就需要一个小技巧，进行分类整理。
首先给js划分路径（更改filename）
给图片资源划分路径（增加generator的filename）
这样就将之前的文件做好了分类
每次打包都需要手动删除上次打包生成的dist，这样很不方便
在webpack4中需要安装clean-webpack-plugin这个插件，在5中只需增加一个clean属性就好。
字体图标打包
我们拿阿里字体图标库举例，引入先下载好的css样式，字体文件
字体图标无需配置但需要整理打包路径
小贴士： webpack5官网对于rules中type的定义
js兼容
虽然webpack会默认识别js文件，但新语法（es6+），ie浏览器（ie浏览器在2022年6月15日21:00宣布永久关闭，但依然可以使用）是不能识别的，考虑到代码的健壮性，也是需要进行编译适配的。而且需要考虑统一工程代码的编码规范，需要引入例如eslint检测代码的规范性。
js之eslint
eslint是一个语法规则和代码风格的检查工具，适用于在实际项目开发中统一语法、编码风格，提高协作开发后项目的可读性，方便后期维护。
在webpack4版本需要loader解析eslint，5版本需要引入插件eslint-webpack-plugin
插件需要代码中引用才能使用，而且需实例化构造函数
// 引入eslint
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
让我们在根目录创建一个 .eslintrc.js
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
},
rules: {
"no-var": 2, // 不能使用 var 定义变量
},
};
之后的打包便会按照设置的规范去检查，如果违反规范会打包失败。使用vscode的码友，可以安装eslint插件，可以在编码中第一时间发现错误
如果有些文件不需要被检测，可以在根目录创建.eslintignore（比如打包后的文件）
js之babel
babel用于将es6语法的代码转换为老版本js语法，以便兼容旧版本浏览器或其他环境。
可以添加babel配置文件 .babel.config.js于根目录，进行配置
安装babel解析器npm i babel-loader @babel/core @babel/preset-env -D
也可以在webpack配置文件内直接加入
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules中的js文件（这些不处理）
loader: "babel-loader",
options: {
// @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
// @babel/preset-react：一个用来编译 React jsx 语法的预设
// @babel/preset-typescript：一个用来编译 TypeScript 语法的预设
presets: ["@babel/preset-env"],
}
},
