First, create a new folder and then open the console to initialize package.json from within the folder.

npm init -y
Copy the code

Then install webpack-cli, webpack, and webpack-dev-server. Due to version compatibility issues, all the plug-ins described above use fixed versions.

NPM intsall -d [email protected] [email protected] [email protected] Then we modify package.json to add startup commands and package commands.


{
  "name": "myapp"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."dev": "webpack-dev-server --mode development".// Add the start command
    "build": "webpack --mode production"  // Add the package command
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "webpack": "^ 5.36.2"."webpack-cli": "^" 3.3.12."webpack-dev-server": "^ 3.11.2"}}Copy the code

In the second part, we start to configure file entry, services, etc.

Create a new SRC folder inside the folder as the file location where we start the service mapping.

SRC creates an index.html as the page template.


<! -- // src/index.html -->

<! 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>
  Hello
</body>
<script src="/bundle.js"></script>
</html>
Copy the code

The bundle.js in the preceding example is the resource associated with main.js after webpack. Since it is hot started, the path is slightly different and it is not a real physical address.

Then create the webpack.config.js configuration file in the root directory. For more configuration items, refer to the development server configuration website


// webpack.config.js
const path = require('path');

module.exports = {
	entry: './src/main.js'.// Import file
	output: {
		path: path.join(__dirname, './dist'), // Package location
		filename: 'bundle.js'.// The name of the packaged file
	},
	devServer: {  // Local debug service configuration
		port: 80./ / port
		host: '0.0.0.0'.// LAN access can be filled with '0.0.0.0'
		hot: true.// Start hot update
		filename: 'bundle.js'.// Import file import
		contentBase: path.join(__dirname, 'src'), // Map the resource directory location}};Copy the code

Finally, type NPM run dev on the console to start the development server.

Open your browser, type http://127.0.0.1/#, and you’ll see a prototype.

Then you can start the extension in main.js.