An overview of the
It has been nearly two months since WebPack 5.x was released, and v5 has some common plug-ins built in, which is a big change from V4. This paper builds a basic template from zero based on Webpackage 5.x and vue2. X:
Project address: github.com/ddzy/vue2-w…
You can also use scaffolding tools to quickly install:
Scaffolding address: github.com/ddzy/vue2-w…
directory
- Project owner dependency
- The project structure
- Integrate the local development environment
- Hot replacement of integrated modules
- Integrated HTML
- Integrated SCSS
- Integrate TS + Babel
- Integrated Vue
- Integrated image
- Integrate other files
- Integrated ESlint
- Integrated prettier
- Integrate Husky & Lint-Staged
- Integrated VS Code
Project owner dependency
| Name | Version | Link |
|---|---|---|
| vue | 2.6.12 | github.com/vuejs/vue |
| webpack | 5.10.3 | Github.com/webpack/web… |
| webpack-cli | 4.2.0 | Github.com/webpack/web… |
The project structure
. | - vscode | - dist / / packaging output directory | - SRC / / source directory | | - @ types / / ts global declarations files (*. Which s) | | - assets | | - components | | - utils | |-- views | |-- app.vue | |-- index.html | -- main.ts |-- LICENSE |-- README.md |-- .browserslistrc |-- .eslintrc.js |-- .gitignore |-- .prettierrc.js |-- babel.config.json |-- package.json |-- tsconfig.json |-- webpack.config.ts |-- yarn.lockCopy the codeIntegrate the local development environment
The required depend on
| Name | Version | Link |
|---|---|---|
| webpack-dev-server | 3.11.0 | Github.com/webpack/web… |
The configuration process
- Installation-dependent dependencies
yarn add --dev webpack-dev-server
Copy the code- configuration
webpack.config.ts
import * as Webpack from "webpack";
export default{...devServer: {
contentBase: path.resolve(__dirname, 'dist'),
open: true.port: 8888.compress: true.clientLogLevel: 'silent'.noInfo: true,},... }as Webpack.Configuration;;
Copy the code- configuration
package.json
{..."scripts": {
"build": "cross-env NODE_ENV=production webpack --config ./webpack.config.ts"."start": "cross-env NODE_ENV=development webpack serve"."serve": "yarn start",}... }Copy the codeHot replacement of integrated modules
The required depend on
slightly
The configuration process
- configuration
webpack.config.ts
import * as Webpack from "webpack";
Copy the codeexport default {
...
plugins: [
+ new Webpack.HotModuleReplacementPlugin(),
],
devServer: {
+ hot: true,},... };Copy the codeIntegrated HTML
The required depend on
| Name | Version | Link |
|---|---|---|
| html-webpack-plugin | 5.0.0 – alpha. 3 | Github.com/jantimon/ht… |
The configuration process
- Installation-dependent dependencies
yarn add --dev html-webpack-plugin
Copy the code- configuration
webpack.config.ts
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
export default {
...
plugins: [
+ new HtmlWebpackPlugin({
+ template: 'SRC /index.html', // customize the HTML template
+}).],... } as Webpack.Configuration;Copy the codeIntegrated SCSS
The required depend on
| Name | Version | Link |
|---|---|---|
| sass | 1.30.0 | github.com/sass/sass |
| sass-loader | 10.1.0 | Github.com/webpack-con… |
| node-sass | 5.0.0 | Github.com/sass/node-s… |
| mini-css-extract-plugin | 1.3.3 | Github.com/webpack-con… |
| postcss | 8.2.1 | Github.com/postcss/pos… |
| postcss-loader | 4.1.0 | Github.com/webpack-con… |
| postcss-preset-env | 6.7.0 | Github.com/csstools/po… |
The configuration process
- Installation-dependent dependencies
yarn add --dev sass sass-loader node-sass postcss mini-css-extract-plugin
Copy the code- configuration
webpack.config.ts
+ import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
export default {
...
+ module: {
+ rules: [
+ {
+ test: /\.css|sass|scss$/,
+ use: [
+ {
+ loader: MiniCssExtractPlugin.loader,
+},
+ {
+ loader: 'css-loader',
+},
+ {
+ loader: 'postcss-loader',
+ options: {
+ postcssOptions: {
+ plugins: [['postcss-preset-env', {}]],
+},
+},
+},
+ {
+ loader: 'sass-loader',
+},
+],
+},
+],
+},
plugins: [
+ new MiniCssExtractPlugin(),],... };Copy the codeIntegrated TS + Babel
The required depend on
| Name | Version | Link |
|---|---|---|
| @babel/core | 7.12.10 | Github.com/babel/babel… |
| @babel/plugin-proposal-class-properties | 7.12.1 | Github.com/babel/babel… |
| @babel/plugin-proposal-decorators | 7.12.1 | Github.com/babel/babel… |
| @babel/plugin-transform-runtime | 7.12.10 | Github.com/babel/babel… |
| @babel/preset-env | 7.12.11 | Github.com/babel/babel… |
| @babel/preset-typescript | 7.12.7 | Github.com/babel/babel… |
| babel-loader | 8.2.2 | Github.com/babel/babel… |
| typescript | 4.1.3 | Github.com/microsoft/T… |
| tsconfig-paths-webpack-plugin | 3.3.0 | Github.com/dividab/tsc… |
| @babel/polyfill | 7.12.1 | Github.com/babel/babel… |
| @babel/runtime | 7.12.5 | Github.com/babel/babel… |
The configuration process
- Installation-dependent dependencies
yarn add --dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript babel-loader typescript tsconfig-paths-webpack-plugin
yarn add @babel/polyfill @babel/runtime
Copy the code- configuration
webpack.config.ts
import * as Webpack from 'webpack';
export default {
...
- entry: './src/main.ts',
+ entry: ['@babel/polyfill', './src/main.ts'],
module: {
rules: [
...
+ {
+ test: /\.ts|js$/,
+ exclude: /node_modules/,
+ use: [
+ {
+ loader: 'babel-loader',
+},
+],
+},. ] ,},+ resolve: {
+ extensions: ['.ts', '.js'],
+ plugins: [
+ // Map the path alias configured in tsconfig to webpack.resolve.alias
+ // Components can be introduced in.vue files in the form of @/components/xxx.vue
+ new TsconfigPathsPlugin(),
+],
+},. } as Webpack.Configuration;Copy the code- configuration
babel.config.json
{
"presets": [["@babel/preset-env",
{
"useBuiltIns": false}], ["@babel/preset-typescript",
{
"allExtensions": true}]],"plugins": [["@babel/plugin-proposal-decorators",
{
"legacy": true}], ["@babel/plugin-proposal-class-properties"],
["@babel/plugin-transform-runtime"]]}Copy the code- configuration
tsconfig.json
{
"compilerOptions": {
"sourceMap": true."module": "CommonJS"."target": "ES5"."baseUrl": "."."rootDir": "."."allowJs": true."experimentalDecorators": true.// Path alias
"paths": {
"@ / *": ["src/*"]}},"include": ["src/**/*"]."exclude": ["node_modules"."dist"]}Copy the codeIntegrated Vue
The required depend on
| Name | Version | Link |
|---|---|---|
| vue | 2.6.12 | github.com/vuejs/vue |
| vue-class-component | 7.2.6 | Github.com/vuejs/vue-c… |
| vue-property-decorator | 9.1.2 | Github.com/kaorun343/v… |
| vue-loader | 15.9.6 | Github.com/vuejs/vue-l… |
| vue-template-compiler | 2.6.12 | Github.com/vuejs/vue/t… |
The configuration process
- Installation-dependent dependencies
yarn add vue vue-class-component vue-property-decorator
yarn add --dev vue-loader vue-template-compiler
Copy the code- configuration
webpack.config.ts
import * as Webpack from 'webpack';
+ const VueLoaderPlugin = require('vue-loader/lib/plugin-webpack5');
export default {
...
module: {
rules: [
...
+ {
+ test: /\.vue$/,
+ use: [
+ {
+ loader: 'vue-loader',
+},
+],
+},. ] , }, plugins: [ ...+ new VueLoaderPlugin(),
+ // Inject Vue globally to avoid repeated introduction in each.vue file
+ new Webpack.ProvidePlugin({
+ Vue: ['vue/dist/vue.esm.js', 'default'],
+}).. ] , resolve: {- extensions: ['.ts', '.js'],
+ extensions: ['.ts', '.js', '.vue'],},... } as Webpack.Configuration;Copy the code- Globally configured
TSDeclaration file
SRC /@types/ to store the global TS declaration file (*.d.ts):
|-- src
| |-- @types
| | |-- files.d.ts
| | |-- global.d.ts
| | |-- images.d.ts
| | |-- vue.d.ts
Copy the code// ----------files.d.ts-----------
// Declare some files in their original format
declare module "*.txt";
declare module "*.xlsx";
// ---------images.d.ts-----------
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.svg";
// ---------global.d.ts-----------
// With the webpack. ProvidePlugin, the previous configuration
import Vue from "vue";
declare global {
const Vue: typeof Vue;
}
// --------vue.d.ts---------------
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
declare module "vue/types/vue" {
interface Vue {}
}
Copy the codeIntegrated image
The required depend on
Webpack5 has the asset module built in to handle static resources instead of file-loader, url-loader, and Raw-loader
The configuration process
- configuration
webpack.config.ts
import * as Webpack from 'webpack';
export default {
...
module: {
rules: [
...
+ {
+ test: /\.png|jpg|gif|jpeg|svg/,
+ type: 'asset',
+ parser: {
+ dataUrlCondition: {
+ maxSize: 10 * 1024,
+},
+},
+ generator: {
+ filename: 'images/[base]',
+},
+},. ] ,},... } as Webpack.Configuration;Copy the codeIntegrate other files
The required depend on
Webpack5 has the asset module built in to handle static resources instead of file-loader, url-loader, and Raw-loader
The configuration process
- configuration
webpack.config.ts
import * as Webpack from 'webpack';
export default {
...
module: {
rules: [
...
+ {
+ test: /\.txt|xlsx/,
+ type: 'asset',
+ generator: {
+ filename: 'files/[base]',
+},
+},. ] ,},... } as Webpack.Configuration;Copy the codeIntegrated ESlint
The required depend on
| Name | Version | Link |
|---|---|---|
| eslint | 7.16.0 | Github.com/eslint/esli… |
| eslint-plugin-vue | 7.3.0 | Github.com/vuejs/eslin… |
| vue-eslint-parser | 7.3.0 | Github.com/vuejs/vue-e… |
| @typescript-eslint/eslint-plugin | 4.11.0 | Github.com/typescript-… |
| @typescript-eslint/parser | 4.11.0 | Github.com/typescript-… |
The configuration process
- Installation-dependent dependencies
yarn add --dev eslint eslint-plugin-vue vue-eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser
Copy the code- configuration
.eslintrc.js
module.exports = {
parser: "vue-eslint-parser".// Parse the.vue file
parserOptions: {
parser: "@typescript-eslint/parser".// Parse the script tag in the.vue file
},
plugins: ["@typescript-eslint"].extends: ["plugin:vue/recommended"."plugin:@typescript-eslint/recommended"].rules: {
// Define other verification rules
"@typescript-eslint/no-extra-semi": ["error"]."@typescript-eslint/semi": ["error"]."@typescript-eslint/no-empty-interface": 0,}};Copy the code- configuration
package.json
{
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config ./webpack.config.ts",
"start": "cross-env NODE_ENV=development webpack serve",
"serve": "yarn start",
+ "lint": "eslint --fix \"src/**/*.{js,ts,jsx,tsx}\" \"src/**/*.vue\"",}},Copy the codeIntegrated prettier
The required depend on
| Name | Version | Link |
|---|---|---|
| prettier | 2.2.1 | Github.com/prettier/pr… |
| eslint-config-prettier | 7.1.0 | Github.com/prettier/es… |
| eslint-plugin-prettier | 3.3.0 | Github.com/prettier/es… |
The configuration process
- Installation-dependent dependencies
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
Copy the code- configuration
.eslintrc.js
Module. exports = {parser: 'vue-eslint-parser', // parserOptions: {parser: module exports = {parser: '@typescript-esLint /parser', // parses script tags in.vue files, plugins: [' @typescript-esLint '], extends: [ 'plugin:vue/recommended',+ 'plugin:prettier/recommended',
+ 'prettier/@typescript-eslint',
'plugin:@typescript-eslint/recommended',
],
rules: {
'@typescript-eslint/no-extra-semi': ['error'],
'@typescript-eslint/semi': ['error'],
'@typescript-eslint/no-empty-interface': 0,
},
};
Copy the code- configuration
.prettierrc.js
module.exports = {
semi: true.// Statements are followed by semicolons
trailingComma: "all"./ / trailing comma (none | es5 | all)
singleQuote: true.// Use single quotes
printWidth: 80.// The maximum length of each line should be as consistent as possible with the editor
tabWidth: 2.// The length of the Tab indent
useTabs: true.// Use Tab indent
endOfLine: "auto".// The form of a newline at the end of the file
arrowParens: "always".// Arrow function arguments are wrapped in parentheses
};
Copy the code- configuration
package.json
{... "scripts": { "build": "cross-env NODE_ENV=production webpack --config ./webpack.config.ts", "start": "cross-env NODE_ENV=development webpack serve", "serve": "yarn start", "lint": "eslint --fix \"src/**/*.{js,ts}\" \"src/**/*.vue\"",+ "format": "prettier --write \"src/**/*.{js,ts,jsx,tsx}\" \"src/**/*.vue\" ./*.{js,ts}"},... }Copy the codeIntegrate Husky and Lint-staged
The required depend on
| Name | Version | Link |
|---|---|---|
| husky | 4.3.6 | Github.com/typicode/hu… |
| lint-staged | 10.5.3 | Github.com/okonet/lint… |
The build process
- Installation-dependent dependencies
yarn add --dev husky lint-staged
Copy the code- configuration
package.json
{
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+}
+},
+ "lint-staged": {
+ "src/**/*.{ts,vue}": [
+ "prettier --write",
+ "eslint --fix"
+]
+},
}
Copy the codeIntegrated VSCode
Prettier is mainly integrated into VS Code for formatting Code during development
The required depend on
| Name | Description | Link |
|---|---|---|
| Prettier – Code formatter | Prettier plugin for VS Code | Github.com/prettier/pr… |
The build process
- Installing a plug-in
slightly
- configuration
.vscode
Create a new.vscode folder under the project root directory and create settings.json:
{
// Read the local configuration when right-clicking -> formatting in VS Code
The prettier configuration file for the project is read directly here
"prettier.configPath": ".prettierrc.js"
}
Copy the code