一：首先进行项目文件创建以及packjson配置

npm init

二：安装webpck以及相关的库

npm i webpack webpack-CLI webpack-dev-server

{
  "description": "",
  "name": "",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "dependencies": {
    "html-webpack-plugin": "^5.5.1",
    "path": "^0.12.7",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0"
  }
}

三：进行手动创建webpack.config.js文件，以及进行相关配置

利用HtmlWebpackPlugin 进行页面的一个生成

利用entry配置入口文件

oupput配置输出文件以及打包后的文件名

mode是模式选择

modules是指配置查找文件规则，从配置第一项开始找，这里写源码，我们会自己给定一个入口文件，

plugins配置插件

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

const path = require('path');
module.exports={
    entry:'./src/index.js',
    output:{
        filename:'bunle.js',
        path:path.resolve(__dirname,'dist')
    },
    mode: 'none',
    devtool:'eval-source-map',
    resolve:{
    modules:[path.resolve(__dirname,''),path.resolve(__dirname,'node_modules')]
    },
    plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
 
}

四：创建对应的文件，进行测试，src/index.js

console.log(123)

五：创建公共文件和index.html 输出绑定到的文件

六：进行测试运行和打包

npm run dev

npm run build

好啦，第一阶段准备工作就做好啦