帶你使用webpack快速構建web專案的方法
使用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 進行打包了。
自動開啟頁面~注意看位址列與上邊本地開啟的區別。
到這裡，已經做好了基本的搭建了。
踩過的坑：
不指定版本號直接安裝以下依賴：
webpackwebpack-cliwebpack-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外掛~下次有機會繼續分享。
到此這篇關於帶你使用webpack快速構建web專案的方法的文章就介紹到這了,更多相關webpack構建web專案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！