1、新建文件夾webpack-demo，並通過vscode打開；在vscode中在集成終端中打開
2、初始化項目，創建package.json;在在集成終端中輸入以下指令
npm init -y
3、創建項目目錄
- 在根目錄下創建src源代碼目錄和dist打包目錄
- 在src目錄下新建index.html首頁和index.js（webpack5.x默認的程序入口文件）
index.html內容：
index.js內容：
4、安裝webpack及webpack-cli
npm install webpack webpack-cli -D
此時，項目新增node_modules目錄和package-lock.json文件；項目結構為：
5、配置webpack
在項目的根目錄下新增webpack.config.js文件
6、執行webpack打包
在集成終端執行指令 webpack 指令，在默認在dist目錄下生成 main.js 打包文件
7、運行項目查看效果
在index.html文件中手動引入，打包好的main.js文件
運行index.html在瀏覽器中查看運行結果：
此時，我們已經成功創建打包webpack5.x項目，但是還有一個問題：當我們更改源代碼后，並不會實時自動打包main.js文件，我們不可能每次修改完代碼都執行一次webpack手動打包main.js，
所以：
8、安裝webpack開發服務器
執行以下指令安裝 webpack-dev-server
npm install webpack-dev-server -D
修改package.json文件，添加如下內容：
在集成終端運行指令
npm run serve
訪問http://localhost:8080
效果如下：
在此，先 手動點擊src，默認訪問index.html
效果如下：
當前又有一個問題，這需要我們手動訪問src下的index.html，解決方式如下：
9、安裝html-webpack-plugin
執行以下指令安裝html-webpack-plugin
npm install html-webpack-plugin -D
修改webpack.config.js文件，內容如下：
重新執行 npm run serve 指令重新運行程序
效果如下：
此時，我們看到效果了，但是卻出現了2此輸出效果，這是因為webpack自動幫我們打包引用了main.js，而我們還手動引用了main.js，此時我們修改index.html去掉手動引入script
重新到瀏覽器看效果
此時，我們只看到了一次輸出效果，現在我們修改index.js中的源代碼並保存，看看是否能夠做到實時自動打包
修改內容如下：
回到瀏覽器看實時效果：
10、本項目所使用的的插件版本
