This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

preface

Hello, everyone, I’m Light different dust, a new writer you must not have heard of, you can call me light

Recently I have been studying how to build the front-end project of Vue + TS with Webpack

What, you said the community has too many similar articles, you are sick of reading

I am also very helpless ah, advanced things I do not understand the whole, can only write some entry-level mix a face familiar…

What, you say you use Vite use vue-CLI

To tell the truth, I also like to use umi, and they are great tools, simple and elegant, save time and effort, I have used since childhood…

But there are always people who think the projects they build are stronger and more reliable

Although I do not have such confidence, probably this is my dish chicken and other people’s advanced front end of the gap

Without further ado, let’s practice now

I put the code in this repository: Webpack5-ts-vue

You can help yourself if you need to

First, basic packaging

The first part is to walk you through the basic packaging process for WebPack, which I’m sure you already know, but I’m just going to walk you through it

1. Create a project

Find a new folder named webPack5-ts-vue, open the terminal to go to this directory, install webPack and TS dependencies, initialize the project:

mkdir webpack5-ts-vue && cd webpack5-ts-vue

npm install typescript webpack webpack-cli -D

git init
npm init -y
npx tsc --init
Copy the code

Create a new.gitignore file and add the node_modules folder to avoid git’s necessary file tracking

2. Create an import file

Create a new SRC folder under the root directory of the project, create a new index.ts entry file and add the contents:

mkdir src && cd src && touch index.ts
echo"Const myName: string =" light dust ";" > index.tsCopy the code

3. Run the package command

Add packaging script to package.json file:

{
  "scripts": {
    "build": "webpack"}}Copy the code

An error was reported when I ran NPM run build on the command line. The error message tells us that WebPack did not find the correct entry file, and tells us that the default order for WebPack to find entry files is:

src.js
src.json
src.wasm
src/index.js
src/index.json
src/index.wasm
Copy the code

Our index.ts file is not in this column

4. Add the TS parsing tool

Ts files are not directly parsed by Webpack, so we need to use ts-Loader for special processing

Installation-related dependencies:

npm i ts-loader -D
Copy the code

Create the webpack configuration file webpack.config.js in the project root directory and write the following:

module.exports = {
  entry: "./src/index.ts".module: {
    rules: [{test: /\.ts$/,
        exclude: /node_modules/,
        use: "ts-loader",},],},};Copy the code

Run the package command again, silky smooth, the terminal reported no errors

5. Modify the configuration file

Open the main.js file in the generated dist directory and find it empty

This is because Webpack runs in Production mode by default and optimizes file content using the tree-shaking feature. We only have one declaration in index.ts, and we don’t use this declaration variable. Webpack’s tree shake automatically removes this useless declaration, leaving the packed file empty

We can manually declare to run in development mode:

module.exports = {
  mode: "development"};Copy the code

Run the package command again, and the generated file now has content

6. Generate HTML entries

Install htML-webpack-plugin to process index. HTML file. The function of this plugin is to automatically generate the correct project entry file according to the template file provided, and automatically insert the JS file packed by Webpack into it

npm i html-webpack-plugin -D
Copy the code

Create a project entry index.html template file in the project root directory:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
Copy the code

Modify the configuration file webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      title: "webpack5-ts-vue".template: "./index.html",})],// ...
};
Copy the code

Note that setting title only in the configuration file does not work, so the index.html file needs to be modified accordingly:

<head>
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
Copy the code

This is actually EJS template syntax, where variables are replaced by some value during packaging

7. Run the project

To get a better view, we’ll make the contents of the index.ts file more complex:

const myName: string = "Light and different Dust.";
console.log(myName);

[1.2.3].forEach((item) = > {
  console.log(item);
});

const isInclude = ["a"."b"."c"].includes("a");
console.log(isInclude);
Copy the code

HTML and main.js files are generated in the dist directory. Use VSCode’s Live Server plugin or any other tool that can start the static resource server locally to open the index.html file and open the console. You can see that the expected result was successfully entered on the console:

"Light and different Dust.";
1;
2;
3;
true;
Copy the code

The basic packaging process is now complete and the project structure is as follows:

├─ ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ tsconfig.jsonCopy the code

Second, development server

In order to have a better development experience, we introduced webpack-dev-server and started the development server

npm i webpack-dev-server -D
Copy the code

Add configuration in webpack.config.js:

module.exports = {
  // ...
  // After webpack is upgraded to 5.0, the target default value will change according to browserslist in package.json, causing devServer's automatic update to fail
  // So the development environment is directly configured to web
  target: "web".devServer: {
    hot: true.// Enable hot module replacement
    open: true.// Open the default browser
  },
  // ...
};
Copy the code

Add a script to package.json:

{
  "scripts": {
    "serve": "webpack serve"}}Copy the code

So when we run the NPM run serve development command, the default browser will open automatically, and when we change the content of the file, the browser will refresh automatically

Here we explain in detail the proxy configuration item, which is very common in real development. It is used to set up the proxy to solve cross-domain problems in the development environment. The idea is to forward our local requests through an intermediate proxy server to a real interface server with no cross-domain issues

Common proxy configuration items are as follows:

module.exports = {
  // ...
  devServer: {
    proxy: {
      "/api": {
        / / need agent to the real goal of server, such as/API/user agents to https://www.juejin.cn/api/user
        target: "https://www.juejin.cn".// Whether to change the host address of headers requested by the proxy. Some servers with higher security levels verify this
        changeOrigin: true.// API servers that forward requests to HTTPS are not accepted by default, set to false if you want to support this
        secure: false.// The/API is also written to the request URL by default, which can be removed with this configuration
        pathRewrite: {
          "^/api": "/",},},},},// ...
};
Copy the code

3. Split configuration files

To better reflect our goal of building an enterprise development environment, let’s split the webPack configuration file

Delete the original webpack.config.js file, create a new config folder, create webpack.base.js, webpack.dev.js and webpack.prod.js files, and install the dependencies required by the merged configuration files:

npm i webpack-merge -D
Copy the code

Write the following to each of the three files:

1. Basic configuration

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.ts".module: {
    rules: [{test: /\.ts$/,
        exclude: /node_modules/,
        use: "ts-loader",}]},plugins: [
    new HtmlWebpackPlugin({
      title: "webpack5-ts-vue".template: "./index.html",})]};Copy the code

2. Develop configurations

const { merge } = require("webpack-merge");

const baseConfig = require("./webpack.base.js");

module.exports = merge(baseConfig, {
  mode: "development".target: "web".devServer: {
    hot: true.open: true,}});Copy the code

3. Production configuration

const { merge } = require("webpack-merge");

const baseConfig = require("./webpack.base.js");

module.exports = merge(baseConfig, {
  mode: "production"});Copy the code

Modify NPM script:

{
  "scripts": {
    "build": "webpack --config ./config/webpack.prod.js"."serve": "webpack serve --config ./config/webpack.dev.js"}}Copy the code

In this way, the configuration files are easily distinguished in the environment, and the subsequent work is just to add configurations to different configuration files according to different requirements. Of course, the configuration files in the actual project are much more complex than the case

Note that the path in the configuration file is not changed by placing the configuration file in a deeper config folder. This is because there is a Context property in the WebPack configuration, which is used to parse the entry point and loader. The default is the webPack startup directory, which is generally the root directory of the project

Four, pack all kinds of documents

Webpack is a JS file packaging tool. Other types of files generally need to be parsed and packaged by an extra loader. Let’s look at the details below

1. vue

Install vue3:

npm i vue@next -S
Copy the code

Install the vue – loader:

npm install vue-loader -D
Copy the code

Create app. vue file in SRC folder:

<template>
  <h1>{{ name }}</h1>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const name = "Light and different Dust.";
    return{ name, }; }});</script>
Copy the code

Modified index. Ts:

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");
Copy the code

Modify the webpack. Base. Js:

module.exports = {
  module: {
    rules: [{test: /\.vue$/,
        use: "vue-loader",},],},};Copy the code

Error: @vue/compoiler-sfc is required to parse the.vue file: @vue/compoiler-sfc

npm i @vue/compiler-sfc -D
Copy the code

In addition, you also need to configure the corresponding vue plugin, which is used to define the js, CSS and other rules to the.vue file:

const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  plugins: [new VueLoaderPlugin()],
};
Copy the code

Running the development command in this way does not report an error, but the browser is still blank and the console still reports an error

This is because the single-file component is parsed into three parts by vue-loader, and the script part is ultimately handled by TS-Loader, but TSC does not know how to handle.vue ending files

To solve this problem, add a configuration item to ts-Loader:

module.exports = {
  // ...
  module: {
    rules: [{test: /\.ts$/,
        loader: "ts-loader".exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],},},],},// ...
};
Copy the code

The.vue file should be parsed perfectly

Note that to solve the problem of ts reporting.vue files, add a shims-vue.d.ts type declaration file in the SRC directory

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}
Copy the code

2. ts

Although we’ve covered using ts-Loader to process TS files in section 1, there’s a problem: The Loader converts typeScript to javaScript and only takes care of the new syntax, and the new API doesn’t automatically add polyfills

To solve this problem, we’re going to serve the Babel. Babel is a tool chain for converting ECMAScript 2015+ code to backward-compatible versions of javaScript in older browsers and environments, including syntax conversion, source code conversion, etc. Those of you who follow the community may know that since Babel 7, TS compilation has been supported, so ts-Loader can be deprecated

Install Babel dependencies:

npm i babel-loader @babel/core @babel/preset-env @babel/preset-typescript -D
Copy the code

Modify the webpack. Base. Js:

module.epxorts = {
  module: {
    rules: [{test: /\.(t|j)s$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader".options: {
            cacheDirectory: true,},},},],},};Copy the code

Add the babel.config.js file to the project root directory:

module.exports = {
  presets: [
    "@babel/preset-env"["@babel/preset-typescript",
      {
        allExtensions: true.// All file extensions are supported},]],};Copy the code

It is now safe to uninstall the TS-Loader

3. scss

To add styles to the app. vue file, I used SCSS, but I got an error due to lack of loader

npm i css-loader style-loader postcss-loader postcss-preset-env sass-loader sass -D
Copy the code

Add configuration to webpack.base.js:

module.exports = {
  // ...
  module: {
    rules: [{test: /\.(sa|sc|c)ss$/,
        use: ["style-loader"."css-loader"."postcss-loader"."sass-loader"],},],},// ...
};
Copy the code

It should be emphasized that the application sequence of loader is from right to left and from bottom to top

Postcss is a tool for processing style files, which can automatically add style prefixes, modify units, etc. The specific functionality of the postCSS plugin depends on which postCSS plug-ins you provide. These plug-ins can be configured directly in the Loader, better to provide a separate configuration file in the root directory of the project

The autoprefixer plugin might be seen in older projects, but postCSs-preset -env can be used directly, and automatic prefixes are already included

Add the postcss.config.js configuration file in the root directory of the project:

module.exports = {
  plugins: ["postcss-preset-env"]};Copy the code

If you choose less in your project, just install less-Loader and make a few configuration changes

4. img

Before Webpack5, we need to use url-loader and file-loader to load images, fonts and other resources

Starting with Webpack5, we can use the built-in resource module type, Asset Modules Type, to replace these loaders

Asset Modules Type There are four Asset Modules types:

asset/resourceSend a separate file and export the URL previously by usingfile-loaderimplementation
asset/inlineExport the data URI of a resource, previously by usingurl-loaderimplementation
asset/sourceExport resource source code previously by usingraw-loaderimplementation
assetAutomatically choose between exporting a data URI and sending a separate file, previously by usingurl-loaderImplementation, and resource volume limits can be configured

module.epxorts = {
  module: {
    rules: [{test: /\.(png|svg|jpe? g|gif)$/,
        type: "asset".generator: {
          filename: "images/[name]-[hash][ext]",},},],},};Copy the code

Note that the [ext] extension wildcard contains., we do not need to write extra, unlike the previous loader

5. font

As above, I will not repeat it here

module.epxorts = {
  module: {
    rules: [{test: /\.(eot|svg|ttf|woff2? |) $/,
        type: "asset/resource".generator: {
          filename: "fonts/[name]-[hash][ext]",},},],},};Copy the code

Other configurations

I go on to describe some configurations and plug-ins that make WebPack more useful

1. Inject environment variables

To set environment variables across terminals, we use the cross-env tool

npm i cross-env -D
Copy the code

Modify NPM script:

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"."serve": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js"}}Copy the code

In the webpack configuration file, process.env.node_env can read the current environment variable, and we can make some configuration optimizations based on this variable

2. Extract the style file

The official Webpack documentation has this description:

For production builds it’s recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.

It is recommended that we use the mini-CSs-extract-plugin tool to extract style files in the production environment so that we can have better loading efficiency in the browser

Installation-related dependencies:

npm i mini-css-extract-plugin -D
Copy the code

Make the following changes in the webpack.base.js base configuration file:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
constdevMode = process.env.NODE_ENV ! = ="production";

module.exports = {
  // ...
  module: {
    rules: [{test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader"."postcss-loader"."sass-loader",],},],},// ...
};
Copy the code

Add a plug-in to the webpack.prod.js production configuration file:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(baseConfig, {
  // ...
  plugins: [new MiniCssExtractPlugin()],
  // ...
});
Copy the code

In this way, in the development environment, we still use style-loader for more efficient development, and when packaging, we can separate styles into separate files

3. Automatically copy files

When some files do not need to be packaged by Webpack and can be used directly, such as some third-party script JS files, we can use the copy-webpack-plugin to copy files directly

For example, we have a lodash.min.js file in the public folder, and now we want to use it in our project. There are two solutions:

Plan 1: inindex.jsImport directly from the entry file

import ".. /public/lodash.min.js";
Copy the code

This scheme is feasible, but it will be packaged by Webpack, which is completely unnecessary and reduces the packaging efficiency

Plan two: inindex.htmlusing<script></script>Tags introduced

<script src="./public/lodash.min.js"></script>
Copy the code

This works fine in the development environment, but when you pack it and publish it to the server, the lodash.min.js file doesn’t load successfully because WebPack doesn’t parse index.html, it just treats it as plain text, so you need to manually process the files referenced in it

npm i copy-webpack-plugin -D
Copy the code

Modify the webpack. Prod. Js:

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = merge(baseConfig, {
  // ...
  plugins: [
    new CopyWebpackPlugin({
      // The path after from is relative to the project root directory, and the path after to is relative to the packaged dist directory
      patterns: [{ from: "./public".to: "./public"}],}),],// ...
});
Copy the code

So why does it work in a development environment, mainly because webpack-dev-server has a feature that browsers request files that are not provided through Webpack are found in the project root by default

DevServer starts with a prompt:

Content not from webpack is served from D:\github-workspaces\webapck-ts-vue
Copy the code

Then we can find the correct location of the static resource according to the./public/lodash.min.js path configured in index.html

4. Clear the packing directory

Before WebPack5, we were used to cleaning up the Dist directory using a plug-in called clean-Webpack-plugin. Since WebPack5, you can clean up the packing directory by adding a configuration to the production configuration file

Modify the webpack.prod.js configuration file:

module.exports = merge(baseConfig, {
  // ...
  output: {
    clean: true,},// ...
});
Copy the code

5. Omit extensions

The extensions TAB automatically adds extensions when parsed to a file. The default is [‘. Wasm ‘, ‘. MJS ‘, ‘. In fact, it will affect the running efficiency of WebPack to some extent, so it is not recommended to change it

module.exports = {
  // ...
  resolve: {
    extensions: [".vue"],},// ...
};
Copy the code

6. Set the path alias

Alias is a very useful configuration item when the directory structure of our project is deep, or the path to a file may require.. /.. When this path fragment is accessible, we can alias some common paths

const path = require("path");

module.exports = {
  // ...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, ".. /src"),}},// ...
};
Copy the code

This allows the file to be aliased in the code:

import App from "@/App.vue";
Copy the code

7. Friendly packing tips

Can be installed can not install a beautification console output plug-in

npm i friendly-errors-webpack-plugin -D
Copy the code

Modify the webpack.dev.js configuration file:

const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");

modules.exports = {
  // ...
  plugins: [new FriendlyErrorsWebpackPlugin()],
  // ...
};
Copy the code

8. Package file analysis

If you want to analyze and optimize packaged files, you can install this plug-in

npm i webpack-bundle-analyzer -D
Copy the code

Modify the webpack.prod.js configuration file:

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = {
  plugins: [
    // ...
    new BundleAnalyzerPlugin({
      analyzerMode: "disabled".generateStatsFile: true,}).// ...]};Copy the code

This will generate a stats.json file in the package directory each time the package is completed

Add a script to package.json:

{
  "scripts": {
    "analyze": "webpack-bundle-analyzer --port 3000 ./dist/stats.json"}}Copy the code

Run NPM Run Analyze to automatically open the package file analysis page

File caching

Before WebPack5, we used cache-loader, hard-source-webpack-plugin to cache files, speeding up the secondary build. Now webpack5 has built-in this ability, and by default, it will cache the compiled results in memory. You can also configure it to be cached in the file system

Modify the webpack. Base. Js:

module.exports = {
  // ...
  cache: {
    type: "filesystem",},// ...
};
Copy the code

10. Code separation

By default, WebPack packs all dependencies into a SINGLE JS file, which grows linearly as the project content grows, causing the browser to load slowly. This can be alleviated by using code separation

Add configuration to webpack.prod.js:

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      // Select which files to split. The default is async, that is, only dynamically imported files are split
      chunks: "all".// Extract the minimum chunk size
      minSize: 20000.// The minimum number of references of the chunk to be extracted
      minChunks: 1.// Group the trunk to be extracted
      cacheGroups: {
        // Match the tripartite library in node_modules and pack it into a trunk
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors".priority: -10,},default: {
          // Extract modules imported by at least two trunks and pack them into a single trunk
          minChunks: 2.name: "default".priority: -20,},},},},// ...
};
Copy the code

Vi. Code specification

Ah, you don’t like using ESLint? Enterprise projects, everyone else uses them. Are you sure you don’t want them? Are you sure?

Go ahead, go ahead…

1. ESLint

ESLint is used to check code for rules, check against the rules you provide during development, and give error messages

Install esLint dependencies in your project:

npm i eslint -D
Copy the code

Run the esLint initialization command and select as prompted. After selecting, the dependencies will be automatically installed and the.eslintrc.js configuration file will be generated in the project root directory

NPX eslint --init $√ How would you like to use eslint? · Problems $√ Whattypeof modules does your project use? · ESM $√ Which framework does your project use? · Vue $√ Does your project use TypeScript? · No/Yes $√ Where does your code run? · Browser $√ Whatformat do you want your config file to be in? · JavaScript $The config that you've selected requires The following dependencies: @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vueCopy the code

Typescript-eslint /eslint-plugin is an official TS esLint plugin

Eslint-plugin-vue is an esLint plugin provided by Vue

.eslintrc.js is modified as follows:

module.exports = {
  env: {
    browser: true.es2021: true,},parser: "vue-eslint-parser".parserOptions: {
    ecmaVersion: 12.parser: "@typescript-eslint/parser".sourceType: "module",},plugins: ["vue"."@typescript-eslint"].// Extends also takes precedence backwards
  extends: [
    "plugin:@typescript-eslint/recommended"."plugin:vue/vue3-recommended"."eslint:recommended",].rules: {
    "@typescript-eslint/no-explicit-any": "off"."@typescript-eslint/ban-types": "off",}};Copy the code

Eslint-webpack-plugin: Eslint-webpack-plugin: Eslint-webpack-plugin: Eslint-webpack-plugin

npm i eslint-webpack-plugin -D
Copy the code

Add configuration to webpack.dev.js:

const ESLintPlugin = require("eslint-webpack-plugin");

module.exports = {
  // ...
  // Note that esLint will only check files at the end of js by default if file extensions are not declared
  plugins: [new ESLintPlugin({ extensions: ["js"."ts"."vue"]})],// ...
};
Copy the code

This gives you a good code specification prompt in the terminal after you run the development command

2. Prettier

A unified coding style facilitates efficient collaboration among team members

It’s pretty scary when you get a requirement and open someone else’s code to find that it’s never been formatted

Maybe you only need to change a small amount of code, but because you want to format the entire text to make it look nice, you end up showing the entire file changed in the code repository, making it hard to track the actual code changes

To solve this problem, prettier was included in the project

npm i prittier eslint-config-prettier eslint-plugin-prettier -D
Copy the code

Add the.prettierrc configuration file:

{
  "printWidth": 80
}
Copy the code

Prettier is the default for prettier, where there is only one line width, because prettier provides very few configuration items so that there is more uniformity

Add the.prettierIgnore configuration file:

dist/
node_modules
Copy the code

Modify. Eslintrc. Js:

module.exports = {
  // ...
  plugins: ["vue"."@typescript-eslint"."prettier"].extends: [
    "plugin:@typescript-eslint/recommended"."plugin:vue/vue3-recommended"."eslint:recommended"."plugin:prettier/recommended",].// ...
};
Copy the code

Be sure to place Prettier’s plug-in last

This brings EsLint and Prettier together in a console that prettily displays a Red Cross for every extra space or semicolon missing

3. lint-staged

It would be inefficient to run Lint through your project. It is better to just have files in staging do code validation. This will save a lot of time, and the tool you’ll need is Lint-staged

npm i lint-staged -D
Copy the code

Add the lint-lanterns.config.js configuration file:

module.exports = {
  "src/**/*.{js,ts,vue}": [
    "eslint --fix --ext .js,.ts,.vue"."prettier --write",]};Copy the code

This way, NPX Lint-staged execution on the command line allows you to manually run ESLint +prettier in staging for code style verification

4. husky

In order to ensure that the code entering git repository is consistent and consistent, we also need to force a code verification before committing. Using Husky, we can automatically run the code verification command at commit time

npm i husky -D
Copy the code

We are installing Husky version 6.0 and above, and we will first add a script to package.json according to the documentation:

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

Run the Husky installation script:

npm run prepare
Copy the code

Running this command generates a.husky folder in the project root directory

Add a Git hook:

npx husky add .husky/pre-commit "npx lint-staged"
Copy the code

After executing this command, a pre-commit file was automatically generated in the.husky directory, but my tests on the company Windows machine didn’t work, so we added the file manually

Create a new pre-commit file under the.husky directory and write:

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

npx lint-staged
Copy the code

Now every time you commit, Lint-staged rules will be automatically validated. If Lint fails, the current COMMIT will be aborted until you have fixed all errors

Write in the last

By now, I have finished writing the basic webpack. Due to my limited technical level, there must be many omissions and unclear points in the article. Welcome your criticism and correction

The webPack toolchain process is too long, and each tool contains a large number of configuration items. It is not easy to understand the specific function of each configuration. This article only introduces some of the most core and most commonly used configurations and plug-ins. No wonder some people joke about webpack configuration engineers

We can also roughly predict that the probability of the project configured by ourselves is a sub-optimization product, and there must be a lot of room for improvement. Therefore, I prefer to believe in the power of the community, and use the more mature tools in the community in the actual work process. They are maintained by full-time developers and put much more effort into them than I personally or even most ordinary developers like me

Writing this article is mainly in my recent review, consolidate the foundation, now just learn the Part of Webpack, so I do some summary, prepare for my future interview. If it happens to help you, then I’m overjoyed

I work in Hangzhou, active in the Yangtze River Delta area, if you want to make friends or have further communication needs, you can add my wechat: imheguang

I am light, let’s progress together, become stronger

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.

Nanny level tutorial: build Webpack5+ TS +Vue3 development environment from scratch

preface

First, basic packaging

1. Create a project

2. Create an import file

3. Run the package command

4. Add the TS parsing tool

5. Modify the configuration file

6. Generate HTML entries

7. Run the project

Second, development server

3. Split configuration files

1. Basic configuration

2. Develop configurations

3. Production configuration

Four, pack all kinds of documents

1. vue

2. ts

3. scss

4. img

5. font

Other configurations

1. Inject environment variables

2. Extract the style file

3. Automatically copy files

4. Clear the packing directory

5. Omit extensions

6. Set the path alias

7. Friendly packing tips

8. Package file analysis

File caching

10. Code separation

Vi. Code specification

1. ESLint

2. Prettier

3. lint-staged

4. husky

Write in the last

Nanny level tutorial: build Webpack5+ TS +Vue3 development environment from scratch

preface

First, basic packaging

1. Create a project

2. Create an import file

3. Run the package command

4. Add the TS parsing tool

5. Modify the configuration file

6. Generate HTML entries

7. Run the project

Second, development server

3. Split configuration files

1. Basic configuration

2. Develop configurations

3. Production configuration

Four, pack all kinds of documents

1. vue

2. ts

3. scss

4. img

5. font

Other configurations

1. Inject environment variables

2. Extract the style file

3. Automatically copy files

4. Clear the packing directory

5. Omit extensions

6. Set the path alias

7. Friendly packing tips

8. Package file analysis

File caching

10. Code separation

Vi. Code specification

1. ESLint

2. Prettier

3. lint-staged

4. husky

Write in the last

Related Posts

Nuggets articles to watch this week (June 6-April 12)

This article deals with webPack build optimization strategies

Comparison of localStorage, sessionStorage, cookie, and Session web data storage methods