webpack下前端简单工程化实例

目录

初始化webpack项目

代码规范化

代码提交限制

---

初始化webpack项目

1：创建一个新的空文件夹

2：安装webpack和webpack-cli

npm i webpack webpack-cli -D

3：利用webpack初始化命令初始化项目

回车后会提示需要安装@webpack-cli/generators，输入y安装即可

npx webpack init

选项按需依次选择即可，我的选择是

 4：等待安装完成，创建的webpack项目已经初始化，可以尝试启动

代码规范化

5：进一步完善，使用eslint、prettier、.editorconfig

npm i eslint prettier -D

 仅安装是无效，需要两步

1. 在项目根目录创建对应的配置文件
2. 安装对应的插件（vscode）

我的prettier配置，根目录创建.prettierrc文件

{
  "arrowParens": "avoid",
  "trailingComma": "es5",
  "printWidth": 120,
  "semi": false,
  "singleQuote": true
}

eslint使用命令初始化，会自动帮助安装@eslint/config库

npx eslint --init

选项按需依次选择即可，我的选择是

PS, 第五步选择code运行环境，建议同时选择browser和node环境

 安装完毕会自动生成.eslintrc.js文件

PS：注意该文件的extends项，这个是vue3的配置，如果是vue2需要修改为'plugin:vue/recommended'，具体查阅官方文档：User Guide | eslint-plugin-vue (vuejs.org)

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: 'plugin:vue/vue3-essential',
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['vue'],
  rules: {},
}

安装插件eslint-config-prettier，避免eslint和prettier规则冲突

npm i -D eslint-config-prettier

修改.eslintrc.js的extends项

module.exports = {
  extends: ['plugin:vue/vue3-essential', 'prettier'],
}

根目录新建.editorconfig文件，用于规范编辑器的默认行为，具体查阅文档即可

root = true

[*]
end_of_line = lf
insert_final_newline = false

[*.{js,py}]
charset = utf-8

[Makefile]
indent_style = tab

[lib/**.js]
indent_style = space
indent_size = 2

[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

代码提交限制

文档：Pre-commit Hook · Prettier

 先git init初始化仓库，添加node_modules到gitignore中去

git init

.gitignore文件

node_modules
dist

在执行命令

npx mrm@2 lint-staged

会在根目录生成.husky文件夹，内部有自动生成的一个commit钩子

此时package.json文件下自动生成

{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.{js,css,md}": "prettier --write"
  }
}

packjson.json新增部分

prepare会帮助你在npm i之前自动执行husky 初始化 命令

lint-staged 代表对应会执行的命令

会对根目录下 js后缀的文件执行eslint

会对根目录下js、css、md后缀的文件执行prettier

.husky/pre-commit

git commit之前自动会执行的钩子函数

使用git commit提交任意内容，会提前自动执行钩子函数pre-commit文件中的

npx lint-staged

  钩子函数又会调用packjson.json下的lint-staged                  

eslint --fix && prettier --write