請參考右邊網頁的Installation和Getting Started篇：https://webpack.js.org/guides/
安裝webpack
先使用git bash進入一個你想安裝的位置，然後請在git bash裏輸入如下命令，該命令將下載最新版本的webpack。
cd //這裏填寫你想安裝的位置
npm install --save-dev webpackwebpack安裝成功及文件夾中新增文件如下二圖：
新建信息文件package.json
webpack安裝成功後，如果想在目錄下新建一個webpack相關的信息文件，請使用下面命令：
npm init -y信息文件package.json新建成功及文件夾中新增文件如下二圖：
加載Lodash
方法1
首先，修改文件夾結構，添加下圖中沒有的文件夾和文件：
-
node_modules、package-lock.json是下載webpack產生的文件 -
package.json是webpack相關的信息文件，現在需要修改私密性+ "private": true, //前面加號表示請 添加 這行 - "main": "index.js", //前面減號表示請 刪除 這行 -
添加
index.html<!doctype html> <html> <head> <title>Getting Started</title> <script src="https://unpkg.com/[email protected]"></script> </head> <body> <script src="./src/index.js"></script> </body> </html> -
添加
./src/index.jsfunction component() { let element = document.createElement('div'); // Lodash, currently included via a script, is required for this line to work element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
完成添加、修改，運行index.html，看到如下結果，說明正確：
方法2
修改文件夾結構，將index.html移入文件夾dist中：
在webpack安裝目錄下，使用如下命令安裝lodash
cd //這裏填寫webpack安裝目錄
npm install --save lodash安裝成功後，會在node_modules裏添加新文件夾lodash、lodash.debounce：
-
修改
./src/index.jsimport _ from 'lodash' //👈新添加的語句 function component() { let element = document.createElement('div'); //Lodash, currently included via a script, is required for this line to work element.innerHTML = _.join(['Hello','webpack'],' '); return element; } document.body.appendChild(component()); -
修改
./dist/index.html<!doctype html> <html> <head> <title>Getting Started</title> <!-- <script src="https://unpkg.com/[email protected]"></script> --> //👈刪除 </head> <body> <!-- <script src="./src/index.js"></script> --> //👈刪除 <script src="main.js"></script> //👈添加 </body> </html>
完成修改後，還需運行下述命令，確定以./src/index.js爲入口（entry point），輸出./dist/main.js（output）：
npx webpack輸入上述命令後，會提示安裝webpack-cli，安裝就是了，成功及文件夾dist新增文件如下圖：
完成上述修改，運行index.html，看到如下結果，說明正確：
注意！！至此，在chrome、edge中都行正常顯示，firefox中還需在index.html的<head>裏添加<meta charset="utf-8">才能看到正確結果
新建配置文件webpack.config.js
webpack官方教程裏說，如果你是用的是version 4，那其實你是不需要配置文件的，但是很多項目很複雜，可能會用到很多配置，所以還是新建一個配置文件吧。
As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a configuration file.
首先，請自行創建配置文件./webpack.config.js，(ﾉ*･ω･)ﾉ，指示圖標也變得不一樣了：
-
添加
webpack.config.js內容，配置文件基本格式：const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') } }; -
git bash裏操作，將默認配置文件替換爲這個配置文件，且成功如下圖：npx webpack --config webpack.config.js
便民優化
修改./dist/main.js更新命令
請參考：https://webpack.js.org/guides...
至此，webpack基本操作已經完成。
當你修改./src/index.js、./dist/index.html等會改變頁面顯示的時候，都需要在git bash中輸入命令npx webpack進行更新（導出新的./dist/main.js），如果你不喜歡這個命令，你可以自行設置命令。
-
如果你需要修改更新命令，請修改信息文件
./package.json：{ "name": "react-todolist", "version": "1.0.0", "description": "", "private": true, "dependencies": { "lodash": "^4.17.11", "webpack": "^4.20.2" }, "devDependencies": { "webpack-cli": "^3.1.2" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" //👈新添內容 }, "keywords": [], "author": "", "license": "ISC" } -
完成上述添加後，你就可以在
git bash中使用如下命令對./dist/main.js進行更新：npm run build - 成功！！
開啓watch模式，捨棄次次npm run build、npx webpack
請參考：https://webpack.js.org/guides...
watch模式會自動監聽你這個文件夾裏所有的文件，當你修改一些文件需要更新頁面，不再需要在git bash裏反覆輸入npm run build、npx webpack或者你自定義的更新命令，只需要刷新頁面就可以查看更新的結果。
-
如果你需要開啓
watch模式，請在信息文件package.json裏添加如下👈代碼：{ "name": "react-todolist", "version": "1.0.0", "description": "", "private": true, "dependencies": { "lodash": "^4.17.11" }, "devDependencies": { "webpack": "^4.20.2", "webpack-cli": "^3.1.2" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack --watch" //👈新添加的代碼，開啓`watch`模式 }, "keywords": [], "author": "", "license": "ISC" } - 想要退出
watch模式，只需在git bash裏按下快捷鍵ctrl + c，如果你沒改過快捷鍵的話ㄟ( ▔, ▔ )ㄏ
使用webpack-dev-server
請參考：https://webpack.js.org/guides...
watch模式讓你少寫一種git bash命令，webpack-dev-pack讓你都不再需要寫git bash命令就能更新瀏覽器。
-
想要啓動
webpack-dev-server模式，首先需要使用git bash進行安裝：npm install --save-dev webpack-dev-server -
其次，你需要更改配置文件
webpack.config.js：const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, mode: 'development', devServer: { //👈新增 contentBase: './dist' //👈新增 }, //👈新增 }; -
配置完成後，需要在信息
package.json中插入以下👈代碼：{ "name": "react-todolist", "version": "1.0.0", "description": "", "private": true, "dependencies": { "lodash": "^4.17.11" }, "devDependencies": { "webpack": "^4.20.2", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.9" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack --watch", "start": "webpack-dev-server --open" //👈新增 }, "keywords": [], "author": "", "license": "ISC" } -
最後，使用如下
git bash命令啓動，並在你想使用的瀏覽器中輸入網址localhost/8080：npm run start - 想要退出
webpack-dev-server模式，只需在git bash裏按下快捷鍵ctrl + c，如果你沒改過快捷鍵的話ㄟ( ▔, ▔ )ㄏ
總結
步驟：
- 安裝
webpack - 新建信息文件
package.json - 加載
lodash - 新建配置文件
webpack.config.js - （可選）修改
./dist/main.js更新命令 - （可選）使用
watch、webpack-dev-server模式
文件夾結構：
-
index.html：你的主頁面 -
main.js：打包好的javascript文件 -
node_modules：安裝webpack的文件夾 -
index.js：你的原始javascript文件 -
package-lock.json：安裝webpack的文件（使用npm 5纔有，沒有沒有問題） -
package.json：信息文件 -
webpack.config.js：配置文件