preface

The last engineering configuration was a year ago, these two years a lot of things have been iterated, need to update the knowledge base, based on the latest Webpack5 and a series of (updated third-party library too much. I created some scaffolding, suitable for VUE3, React, TS, and gradually deepened my understanding of engineering. Record it for mutual encouragement

For now, it is a complete VUe3 project, the standardization of the project has been standardized, this step takes time, need to do requirements, also need to do engineering, ESLint official website, prettier, Husky and other normative functions have a deeper understanding, ready to use this to do a VUe3 project for companies to test the water, In the next stage, I will start the React project (although I will definitely use ANTD-Pro). I will have a better understanding of the technical direction and continue to improve my own direction. I will work on the TS version when I have time

Vue3 Basic outline

The project address

Making the address

The project address

Current plugged functions

Vue3 + VUex + VUE-router Unified vue3
CSS compatibility processing (VUe3 does not support IE11, mainly for other kernels)
scss
Eslint + Prettier +husky
Husky Git commit specification handling
Image optimization processing is less than 100K to Base64 processing, otherwise load resources
Consider using dllPlugin or direct CDN… (a)
Module federation (working on… Feels like a new gameplay for the micro front end)

20210617 update

The form query component with strong universality is added, all using combinatorial Api writing method
The project address

Engineering basic configuration

Considering the company’s project, we need to reset the configuration of VScode, so we create a new one in the project. The default setting. Json file is cancelled to prevent conflicts

Create a.vscode file in the project root directory

mkdir .vscode  .vscode/settings.json
Copy the code

This step ensures that the project staff uses vscode for coding and uses the project specifications consistently

Step 1: Do a few things about Git before committing

Husky is a hook function used to check the code before and after committing git

Husky is now available in version v6, and the current version V4 tutorial is no longer available on the beta site

The latest method should be

 "scripts": {
    "prepare": "husky install"
  },
Copy the code

Run the above command in the project root directory to generate the. Husky directory

The document address

Execute the create hook command, using the shell command

NPX husky add. husky/commit-msg "NPM test"Copy the code

That completes the first step

Step 2: Standardize git commit information

Next, standardize git commit, using the usual commit specification information

Installing a plug-in

  yarn add @commitlint/cli  @commitlint/config-conventional  -D
Copy the code

Husky add. Husky /commit-msg “commitlint-e HUSKY_GIT_PARAMS”

After the directory is generated, the content is

#! /bin/sh . "$(dirname "$0")/_/husky.sh" npx commitlint --edit $1Copy the code

The root directory is created. 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]
  }
}


Copy the code

The submission specification should be: (Note the space after the colon)

Step 3: Check the last git step based on husky code

Installing a plug-in

yarn add lint-staged -D
Copy the code

Prettirr, esLint,prettirr, and other CSS checks can be done here, SRC checks, config checks are not done

 //package.json
 
"lint-staged": {
    "src/**.{vue,js}": [
      "eslint --fix",
      "git add"
    ]
}

Copy the code

3. Put the hook into it for automatic inspection

npx husky add .husky/pre-commit “yarn lint-staged”

// Generate a. Husky /pre-commit file #! /bin/sh . "$(dirname "$0")/_/husky.sh" yarn lint-stagedCopy the code

conclusion

At this point, the basic specification for project submission has been set, and you can modify esLint,.prettierrc, etc

Some loaders based on VUe3

vue-loader @vue/compiler-sfc

There is a vue-style-loader which is similar to the style-loader, so I personally use mini-CSS-extract-plugin

Antecedents feed

prettier

When VScode prettier, it also uses Vuter to highlight the syntax of the. Vue file, where the. Prettierrc in the root directory of the project is automatically configured,
The second step is to modify the Settings. Vscode file to optimize for the vue file

//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": Validate ": ["javascript", "javascriptreact", "vue"], // Specify the format tool for *. Vue files as vetur "[vue]": { "editor.defaultFormatter": "octref.vetur", "editor.tabSize": 2, "editor.formatOnType": True}, / / vetur formatting configuration "vetur. Format. The options. TabSize" : 2, "vetur. Format. The options. UseTabs" : true, "vetur.format.defaultFormatter": "", "vetur.format.defaultFormatterOptions": { "prettier": {// // disallow the use of commas "trailingComma": "none"}, "js-beautify-html": {"wrap_attributes": "auto" // auto is HTML parts without newlines; Force-expan-multiline = newline}, "prettyhtml": {"printWidth": 100, "singleQuote": false, "wrapAttributes": "[HTML]": {"editor.defaultFormatter": {"editor.defaultFormatter": {"editor.defaultFormatter": {"edit. "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "Esbenp. prettier-vscode"}, "prettier. PrintWidth ": 100Copy the code

eslint

Install ESLint: Install esLint: install esLint: install esLint: install esLint: install esLint: install esLint: install esLint: install esLint: install esLint: install esLint: install esLint: install esLint: install esLint: install esLint

    yarn run eslint --init
Copy the code

Initializing ESLint has a number of configuration issues

Configure vUE and React. You can configure rules on the official website options

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 / * * 'and' gitignore '], / / ignore files' 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}], // do not allow unused variables 'no-var': 'off', 'no-console': 1, // just warn to use 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 corresponding webpack here. Config. The path of the js, I this path is the path of the vue - cli3 default 'config' : '. / config/webpack.com mon. Js'},}],,}};Copy the code

Distinguish between production test environments

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);

Copy the code

  "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"
  },

Copy the code

node-sass sass-loader

The difficulty lies in the relationship between versions
Do not directly establish a dependency relationship between different versions of YARN add. The dependency can be found in the tag in the Github repository of Sass-Loader. The same applies to less-Loader

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

babel

The project address

So far I only use the bebal/ Core core conventions @babel/ plugin-transform-Runtime and @babel/preset-env to cover current company usage scenarios

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


Copy the code

General optimization ideas

Amway one detects packing speed

Various caches in the Loader

For example, the babel-loader parameter has cache option. This kind of mature loader basically has the same gameplay, you need to find the NPM document Github docs

{
    loader: 'babel-loader',
    options: {
    	cacheDirectory: true
    }
Copy the code

Various hash

ContentHash [name][hash] [hash] [contentHash]

dllplugin

Every time you pack, you don’t need to pack third-party libraries, such as Element-UI ANTD Moment,

How to use dllPlugin

These loaders should be separated from third-party repositories

< span style = "box-sizing: border-box! Important; word-wrap: break-word! ImportantCopy the code

happyPack

Multi-process packaging

CDN Loads third-party libraries

This is also more direct method, fast and violent, you can directly Baidu search, not to repeat, direct company a server to put some miscellaneous miscellaneous 8 resources

conclusion

The current features are already available for the new VUe3 project, and I’ve already written vue3 based on them rather than using Vite directly, although I prefer to use wheels directly, it’s nice to get a better understanding of the overall build process

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue3 Front-end Webpack5 Engineering Summary (continuous record)

preface

Vue3 Basic outline

Making the address

Current plugged functions

20210617 update

Engineering basic configuration

Step 1: Do a few things about Git before committing

Step 2: Standardize git commit information

Step 3: Check the last git step based on husky code

conclusion

Some loaders based on VUe3

vue-loader @vue/compiler-sfc

Antecedents feed

prettier

eslint

Distinguish between production test environments

webpack-merge

node-sass sass-loader

babel

General optimization ideas

Various caches in the Loader

Various hash

dllplugin

happyPack

CDN Loads third-party libraries

conclusion

Vue3 Front-end Webpack5 Engineering Summary (continuous record)

preface

Vue3 Basic outline

Making the address

Current plugged functions

20210617 update

Engineering basic configuration

Step 1: Do a few things about Git before committing

Step 2: Standardize git commit information

Step 3: Check the last git step based on husky code

conclusion

Some loaders based on VUe3

vue-loader @vue/compiler-sfc

Antecedents feed

prettier

eslint

Distinguish between production test environments

webpack-merge

node-sass sass-loader

babel

General optimization ideas

Various caches in the Loader

Various hash

dllplugin

happyPack

CDN Loads third-party libraries

conclusion

Related Posts

React+Redux: RubyChina

Interviewer: What is the difference between Unicode and UTF-8?

The best time to buy and sell stocks