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/resource
Send a separate file and export the URL previously by usingfile-loader
implementationasset/inline
Export the data URI of a resource, previously by usingurl-loader
implementationasset/source
Export resource source code previously by usingraw-loader
implementationasset
Automatically choose between exporting a data URI and sending a separate file, previously by usingurl-loader
Implementation, 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: in
index.js
Import 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: in
index.html
using<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