1. 新建項目

1.1. 新建一個ES6Model文件夾

1.2.?打開VSCode?

1.3. 使用VSCode打開文件夾?

1.4. 選擇要打開的文件夾?

1.5. 資源管理器中顯示打開的文件夾?

1.6. 在終端中運行: npm init -y命令, 初始化包管理器文件package.json?

1.7. 在ES6Model下新建一個src目錄, 在src目錄下新建一個index.html?

1.8. 在終端中運行: npm install jquery -S命令, 安裝JQuery。?

1.9. 在src目錄下新建一個index.js, 適用JQuery實現列表隔行變色?

2.?安裝和配置webpack

2.1. 在終端中運行: npm install webpack webpack-cli -D命令, 安裝webpack相關包

?

2.2. 在項目根目錄中, 創建webpack.config.js的webpack配置文件。在webpack文件中, 初始化如下配置:?

2.3. 在package.json文件的scripts節點下, 新增dev: webpack腳本。scripts節點下的腳本, 可以通過npm run執行。?

2.4. 在終端中運行: npm run?dev命令, 啟動webpack進行項目打包。?

2.5. 打包完成后, 在項目根目錄下生成了一個dist目錄, 該目錄下生成了main.js?

2.6. 在index.html中導入main.js?

2.7. 打開index.html, 查看效果圖?

3. webpack打包的入口與出口

3.1. webpack的4.x版本中, 打包的入口與出口默認約定:

3.1.1.?打包的入口文件為src——>index.js

3.1.2.?打包的出口文件為dist——>main.js

3.2. 如果要修改打包的入口與出口, 可以在webpack.config.js中新增如下配置信息:

4. 配置webpack的自動打包功能

4.1.?在終端中運行: npm install webpack-dev-server -D命令, 安裝支持自動打包的工具

?

4.2.?修改packgae.json的scripts中的dev為webpack-dev-server?

4.3.?修改webpack.config.js, 配置devServer的靜態目錄為項目根目錄?

4.4.?導入的js文件, 不再有./dist目錄?

4.5.?重新進行打包, 可以看到終端并沒有結束, 如果我們修改代碼, 它會自動重新打包?

4.6.?訪問http://localhost:8080/?

4.7.?訪問http://localhost:8080/src/?

5. 配置html-webpack-plugin生成預覽頁面

5.1.?在終端中運行: npm install html-webpack-plugin -D命令, 安裝生成預覽頁面的插件

?

5.2.?修改webpack.config.js, 配置生成預覽頁面插件?

5.3.?訪問http://localhost:8080?

6. 配置打包完成后自動打開頁面

6.1. --open打包完成后自動打開瀏覽器頁面

6.2.?--host配置IP地址

6.3.?--port配置端口

6.4.?重新打包后, 自動瀏覽器打開頁面

?

總結

以上是生活随笔為你收集整理的033_webpack打包ES6模块化工程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。