使用webpack構建web專案以及熱部署插件的使用，按以下步驟，能幫助你快速構建和理解~
詳細學習還得靠官方檔案！
一，基礎構建部分
大前提！你得先安裝了Node.js此處不贅述，
1，創建一個檔案夾
2，在當前檔案夾子下打開命令列工具
3，專案初始化（創建package.json檔案）
npm init -y
4，安裝依賴
版本搭配如下：
"devDependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2",
}
復制粘貼到【命令列工具】回車，安裝依賴以上依賴，會自動在package.json寫入上述依賴，
npm install webpack@^4.17.1 webpack-cli@^3.3.9 webpack-dev-server@^3.8.2 --save-dev
顯示安裝完成：
5，補充一個依賴-插件：
用途：如果沒有此插件需要我們手動給index.html檔案引入 bundle.js，使用此插件我們將會自動在打包的時候創建index.html，且無須關心bundle.js的檔案路徑，
復制粘貼到【命令列工具】回車
npm install html-webpack-plugin --save-dev
插件如何配置使用，html-webpack-plugin官方說明檔案
此時查看檔案夾內容如下：
6，補充檔案結構：
7，補充webpack.config.js的內容：
webpack官方說明檔案整理出來給你后續自己補：
1，webpack的基礎配置
2，webpack-dev-server的官方說明檔案
3，html-webpack-plugin官方說明檔案
// webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './src/main.js',//定義入口檔案
output: {
filename: 'bundle.js',//定義輸出檔案名稱
path: path.resolve(__dirname, 'dist')//定義輸出檔案路徑
},
devServer: {//配置webpack-dev-server（開發環境用的熱部署）
contentBase: "./dist",//定義默認打開路徑，會自動尋找該路徑下的index.html檔案，
host:"localhost",//定義主機
port:8000,//定義埠號
open:true//定義是否自動打開頁面
},
plugins: [
new htmlWebpackPlugin()//配置此插件會自動生成一個index.html并且自動引入bundle.js從而我們無需關心bundle.js的路徑問題，
]
};
在main.js檔案撰寫測驗代碼，
document.write("hello webpack!!")
二，測驗部分
- 測驗打包到本地
注意：若不使用html-webpack-plugin則需要在dist目錄下的index.html里手動引入js檔案，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bundle.js"></script>
</head>
<body>
</body>
</html>
終端輸入：webpack
打包成功后，此時dist目錄下會多一個，bundle.js檔案，
若使用html-webpack-plugin插件其實index.html會自動創建并且覆寫原先我自己創建的index.html，
打開dist目錄下的index.html檔案，查看測驗結果
- 測驗打包到虛擬服務器記憶體
大家都知道的小技巧~
在package.json檔案下配置下webpack-dev-server的快捷鍵，
配置完成后就可以在終端使用：npm run dev 進行打包了，
自動打開頁面~注意看地址欄與上邊本地打開的區別，
到這里，已經做好了基本的搭建了，
踩過的坑：
不指定版本號直接安裝以下依賴：
- webpack
- webpack-cli
- webpack-dev-server
npm install webpack webpack-cli webpack-dev-server --save-dev
使用熱部署（webpack-dev-server）會出現如下報錯：
Error: Cannot find module 'webpack-cli/bin/config-yargs’
出現該報錯的小伙伴可以嘗試文章中提到的搭配的版本~
webpack默認只能打包json模塊和js模塊，對于其他模塊的打包例如css，圖片，等需要借助于相應的loader插件~下次有機會繼續分享，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/212191.html
標籤：其他
上一篇：JS逆向學習筆記 - 持續更新中