【原创】Webpack 基础（二）——ESLint Babel devServer

• 针对兼容性处理，用 Babel。
• 针对代码格式，用 ESlint。
  

  Eslint

  Eslint 的出现就是为了解决团队代码风格不一致的问题，它可以通过配置文件让你强制使用双引号或者单引号、句尾加;或不加;。让一个项目的代码运用一种风格进行编写。同时Eslint还会检测出部分代码中可能暗藏 BUG 的语句。

  配置文件

  npm install eslint-webpack-plugin eslint --save-dev

  const ESLintPlugin = require("eslint-webpack-plugin");
  new ESLintPlugin({
  // 自动修复代码
  fix: true,
  }),

  这里配置就完成了，你可以直接在项目中输入命令:
  eslint --init

.eslintrc.*，例如：.eslintrc .eslintrc.js .eslintrc.json
在 package.json 中写 eslintconfig 则不需要创建文件，在原有文件基础上写。
.eslintrc.js

module.exports = {
  extends: [],
  rules: {

  },
  parserOptions: {
    parser: 'babel-eslint'
  }
};

开发时只检查 src 中的源代码文件，其他文件不需要检查，可以创建eslintignore文件
eslintignore

dist

prettier 使用

npm install eslint-config-prettier eslint-plugin-prettier prettier --save -dev
创建.eslintrc.js文件，写入下面的代码。

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["prettier", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {},
};

Babel

配置文件

babel.config.js babel.config.json
.babelrc.*，例如：.babelrc .babelrc.js .babelrc.json

presets 预设

就是一组 babel 插件，扩展 babel 功能。

• @babel/preset-env 智能预设，允许使用最新的 JavaScript。
• @babel/preset-react 用来编译 react jsx 语法的预设。
• @babel/preset-typescript 用来编译 typescript 语法的预设。

处理 html 资源（自动引入）

HtmlWebpackPlugin

plugins:{
new HtmlWebpackPlugin({
// 以 public/index.html 生成新 HTML，结构和原来一致，自动引入打包输入的资源
template:path.resolve(__dirname,"public/index.html")
})
}

开发服务器自动化

修改完源码自动打包。
webpack-dev-server

devServer:{
host:localhost,
port:3306,
open:true
}

webpack serve
它实现了项目的热更新，需要注意的是，它的操作是在内存中进行完成，并不会输出打包文件。