This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

The scaffold Git address continues to be updated at….

An overview of

Vue3 came out after vuUE-CLI added its scaffolding, had to really smell, I think can use Webpack to make a high imitation. On the one hand, I want to learn more about WebPack, on the other hand, I want to try to expand my familiarity with TS and ESLint configurations, and on the other hand, I want to put them into my work and have a better development experience.

Demand analysis

Since it is imitation, the first step is definitely to experience vuE-CLI created projects. My feelings after personal experience are as follows:

  1. Good HRM support, improve development efficiency
  2. Good TS support, good TS syntax error prompt.
  3. Eslint good support for VUE3, better code specification.

The second step is to extract the core functions:

Basic WebPack configuration

Next, the basic configuration of WebPack. Basic requirements:

  1. Easy to understand directory structure.
  2. The configuration is separated based on the environment.
  3. Common Plug-in Configuration

The directory structure

Depend on the installation

  1. Generate a package.json file using the command NPM init -y
  2. Required dependencies and versions (basically the latest ones used) are as follows
"DevDependencies" : {" HTML - webpack - plugin ":" ^ 5.5.0 ", "webpack" : "^ 5.62.1", "webpack - cli" : "^ 4.9.1 webpack - dev -", "server" : "^ 4.4.0", "webpack - merge" : "^ 5.8.0"}Copy the code

The script command

Package. json adds two scripting commands to develop and package commands.

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

Common Basic Configuration

Common configurations for development and production.

The entrance

entry: path.resolve(process.cwd(), './src/index.js'),
Copy the code

exit

output: {
    filename: '[name].bundle.js',
    path: path.resolve(process.cwd(), './dist')
  }
Copy the code

The plug-in configuration

Here we mainly configure the HTmL-webpack-plugin

plugins: [
    new HtmlWebpackPlguin({
      template: path.resolve(process.cwd(), './public/index.html')   
    })
]
Copy the code

Webpck.common.js complete code

const path = require('path')
const HtmlWebpackPlguin = require('html-webpack-plugin')
module.exports = {
  entry: path.resolve(process.cwd(), './src/index.js'),
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(process.cwd(), './dist')
  },
  plugins: [
    new HtmlWebpackPlguin({
      template: path.resolve(process.cwd(), './public/index.html')   
    })
  ]
}
Copy the code

Dev Development Configuration

Configuration to merge

Use webpack-merge to merge the dev profile with the common configuration

const { merge } = require('webpack-merge')
const common = require('./webpack.common')
module.exports = merge(common, {
    mode: 'development',
})
Copy the code

Serve the configuration

devServer: {
    hot: true,
    port: 8080
}
Copy the code

Sourcemap configuration

Sourcemap is based on its own needs

devtool: "eval-source-map"
Copy the code

Webpack.dev.js complete code

const { merge } = require('webpack-merge') const common = require('./webpack.common') module.exports = merge(common, {mode: 'development', // configure serve devServer: {hot: true, port: 8080}, // configure sourcemap devtool: "eval-source-map"})Copy the code

Prod production configuration

There is no production configuration in this chapter, just a production environment in webpack.prod.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {
  mode: 'production',
})
Copy the code

conclusion

The basic configuration of Webpack is set up, developed using NPM Run Dev and packaged using NPM Run Build! In the next chapter we will configure vue3 and some common loaders (sass-loader, URl-loader, etc.).