vue3前端webpack5工程化总结(持续记录)

笑笑先生
750 阅读4分钟

前言

上一次工程化配置还是一年前，这两年很多东西都迭代了，需要更新一下知识库，基于目前最新的webpack5等一系列(更新的第三方库太多了。。不列举) 自己创了一些脚手架，适合vue3的，react的，ts的，对工程化的理解也慢慢加深，记录一下，共勉之

  • 目前已经是一个完整的vue3项目，针对项目的规范性都已经做了规范，这一步挺花时间的，又要做需求，还要做工程化，对eslint的官网啊，prettier，husky等规范性功能有了更加深刻的理解，准备用这个做一个vue3项目给公司试试水，下一阶段准备针对前端自动化，React的项目动手(不过我肯定还是用antd-pro)，主要是对技术方向有更深的理解，不断精进自己的方向吧，有空补一补TS的版本

vue3基础大纲

项目地址

github地址

项目地址

目前塞进去的功能

  • vue3+vuex+vue-router 统一适配vue3
  • css兼容处理(vue3不支持ie11,主要是针对其他内核)
  • scss
  • eslint+prettier+husky 项目代码规范处理
  • husky git 提交规范处理
  • 图片优化处理 小于100k 转base64处理，否则加载资源
  • 考虑使用dllplugin 还是直接cdn ...()
  • 模块联邦(正在整理...感觉是对微前端的一次新玩法)

20210617更新

  • 增加了普适性较强的表单查询组件，全部使用组合式Api写法

  • 项目地址

工程化基础配置

基于公司项目考虑，需要reset一下vscode的配置，所以项目中新建一个.vscode文件抵消掉了默认的setting.json 防止冲突

  • 在项目根目录下建立.vscode文件
mkdir .vscode  .vscode/settings.json

这一步保证项目人员统一使用vscode进行编码，并统一使用项目规范

第一步:对git提交之前做一些事

husky 主要是对git提交前后的钩子函数，如commit对代码的检查，对提交信息的规范等

  • husky 已经到v6版本，目前亲测网上的v4版本教程已经失效如下

image.png

最新方法应是

 "scripts": {
    "prepare": "husky install"
  },
  1. 先在项目根目录执行上述命令，生成.husky目录

文档地址

  1. 执行创建钩子命令, 使用shell命令
    // 在husky 目录下创建commit-msg 文件，并执行 npm test 这个命令，这个一般根据需求写,
    npx husky add .husky/commit-msg "npm test"

这样第一步就完成了

第二步:规范git提交信息

接下来规范git commit，采用常用的提交规范信息

  1. 安装插件
  yarn add @commitlint/cli  @commitlint/config-conventional  -D
  1. 安装之后执行 npx husky add .husky/commit-msg "commitlint -E HUSKY_GIT_PARAMS"

生成目录后 里面内容为

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx commitlint --edit $1
  1. 根目录创建.commitlintrc.json
{
  "extends": ["@commitlint/config-conventional"],
  "rules": {
    "type-enum": [
      2,
      "always",
      ["upd", "feat", "fix", "refactor", "docs", "chore", "style", "revert"]
    ],
    "type-case": [0],
    "type-empty": [0],
    "scope-empty": [0],
    "scope-case": [0],
    "subject-full-stop": [0, "never"],
    "subject-case": [0, "never"],
    "header-max-length": [0, "always", 72]
  }
}
  1. 此时 提交规范应该为 : (注意冒号后面有空格)

第三步:基于husky的代码检查,把关git最后一步

  1. 安装插件
yarn add lint-staged -D
  1. 之前有装过eslint ,prettirr,或者其他css检查的代码都可以在这里设置，我这里设置的是src下的目录检查，同级的config等目录不进行检查
 //package.json
 
"lint-staged": {
    "src/**.{vue,js}": [
      "eslint --fix",
      "git add"
    ]
}

3.放入钩子自动检查

  • npx husky add .husky/pre-commit "yarn lint-staged"
// 生成一个.husky/pre-commit 文件
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"


yarn lint-staged

总结

至此，项目提交相关基础规范已经设好，根据需求去修改eslint,.prettierrc等文件即可

基于vue3的一些loader

vue-loader @vue/compiler-sfc

  • 之前有一个vue-style-loader 当然他自己也说了，其实跟style-loader 没啥区别，所以我个人直接用mini-css-extract-plugin 功能更全

前情提要

prettier

  1. vscode 安装prettier插件同时，还要安装vuter进行.vue文件语法高亮,会自动根据项目根目录的.prettierrc进行配置 ,
  2. 第二步要修改.vscode的settings.文件针对vue文件进行一些优化处理
 //settings.json
 // Place your settings in this file to overwrite default and user settings.
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "editor.codeActionsOnSaveTimeout": 5000,
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
  	"editor.defaultFormatter": "octref.vetur",
  	"editor.tabSize": 2,
  	"editor.formatOnType": true
  },
  // vetur格式化配置
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": true,
  "vetur.format.defaultFormatter": "",
  "vetur.format.defaultFormatterOptions": {
  	"prettier": {
  		//
  		// 禁止随时添加逗号
  		"trailingComma": "none"
  	},
  	"js-beautify-html": {
  		"wrap_attributes": "auto" // auto是html部分不换行； force-expand-multiline是换行
  	},
  	"prettyhtml": {
  		"printWidth": 100,
  		"singleQuote": false,
  		"wrapAttributes": false,
  		"sortAttributes": false
  	}
  },
  // 使用prettier格式化html与js
  "[html]": {
  	"editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
  	"editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.printWidth": 100 // 超过最大值换行
}

eslint

安装eslint ,这一步至关重要，跟eslint-plugin-vue,eslint 需要同时安装在全局或者项目中，如果两者装的位置不同，会报错

    yarn run eslint --init
  • 初始化eslint 会一系列配置问题 ,百度翻译即可 针对vue，react进行配置，最后的rules 可以去官网options自行配置
这个配置配了我好久，要吐了，不过也对eslint更加理解，以后配置其他的基本手到擒来了
module.exports = {
 'root': true,
 'env': {
 	'es2021': true,
 },
 'extends': [
 	'plugin:vue/essential',
 	'airbnb-base',
 	'eslint:recommended',
 	'plugin:vue/vue3-recommended',
 	'google',
 ],
 'parserOptions': {
 	'ecmaVersion': 12,
 	'sourceType': 'module',
 },
 'ignorePatterns': ['dist/**', '.gitignore'], // 忽略文件
 'plugins': [
 	'vue',
 ],
 'rules': {
 	'no-tabs': 'off',
 	'no-mixed-spaces-and-tabs': 2,
 	'max-len': ['error', { 'code': 300 }],
 	'import/no-extraneous-dependencies': ['error', { 'devDependencies': true }],
 	'no-unused-vars': [0, { 'vars': 'all', 'args': 'after-used', 'ignoreRestSiblings': false }], // 不允许未被使用的变量
 	'no-var': 'off',
 	'no-console': 1, // 只是警告使用console
 	'no-alert': 'off',
 	'vue/html-indent': ['error', 'tab'], // enforce tabs in template
 	'indent': ['error', 'tab'], // enforce tabs in script and js files
 },
 'settings': {
 	'import/resolver': [
 		'node',
 		{
 			'webpack': { // 此处config对应webpack.config.js的路径，我这个路径是vue-cli3默认的路径
 				'config': './config/webpack.common.js',
 			},
 		}],
 },
};

区分生产测试环境

webpack-merge

webpack.dev.js

  
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.common');
const path = require('path');
const devConfig = {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, '/dist'),
    compress: true,
    hot: true,
    port: 9000,
  },   
  devtool: 'inline-source-map'
};

module.exports = merge(baseConfig, devConfig);


  "scripts": {
    "dev": "cross-env NODE_ENV=development  webpack-dev-server --config ./config/webpack.dev.js --open",
    "test": "cross-env NODE_ENV=development  webpack  --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production  webpack --config ./config/webpack.prod.js"
  },

node-sass sass-loader

  • 难点在于对应版本关系

  • 不要直接yarn add 各个版本之间有对应关系,需要在sass-loader的github仓库里 对应依赖可以在tag标签里找到 ，less-loader同理

{
        test: /\.(css|scss|sass)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
        exclude: /node_modules/
},

babel

项目地址

目前本人只用到了bebal/core 核心 常规的@babel/plugin-transform-runtime和@babel/preset-env 足够应付目前公司的使用场景

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58"
        }
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

常规优化思路

  • 安利一个 检测打包速度

loader中的各种缓存

打个比方 babel-loader 的参数有缓存选项，这类成熟的loader 基本都有相同的玩法 ,需要自己找npm文档 github docs

{
    loader: 'babel-loader',
    options: {
    	cacheDirectory: true
    }

各种hash

hash的目的就是服务器的缓存问题，但是目前都比较建议用contentHash了，而不是直接 [name][hash]

dllplugin

每次打包 不需要打包第三方库，如element-ui antd moment 这些都要放在生产环境，

怎么使用dllplugin

这些loader 要和 第三方库区分开

  devDependencies:{}  // 做
  dependencies:{} //基本都是这里的东西 放到dllplugin

happyPack

多进程打包

cdn加载第三方库

这也是比较直接方法，又快又暴力，各位可以直接百度搜，不赘述,直接公司一个服务器 放一些杂七杂八的资源

总结

目前的功能已经可以供vue3新项目使用，自己已经基于这套东西写vue3的东西，而不是直接用vite，虽然我也喜欢直接用轮子，但是更了解整体的构建过程也很不错

avatar
文章
阅读
粉丝