在一個全英文目錄下新建一個全英文的文件夾
以命名爲webpack爲例，進入該文件夾裏面
shift+鼠標右鍵，點擊在此處打開命令行
安裝webpack：
npm install --save-dev webpack
如果你使用的webpack 4+ 版本，還需安裝cli：
npm install --save-dev webpack-cli
等待安裝完成，輸入以下命令：
webpack -v
代表webpack安裝完成
接下來用一個demo來體驗webpack
依然在webpack文件目錄下shift+鼠標右鍵打開命令行
新建一個文件夾app：
mkdir app && cd app
npm init -y
npm install webpack webpack-cli --save-dev
此時app的目錄結構：
新建一個index.html文件和一個src目錄，裏面新建一個index.js文件
src/index.js
function component() {
var element = document.createElement('div');
// Lodash（目前通過一個 script 腳本引入）對於執行這一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
<!doctype html>
<html>
<head>
<title>app</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
我們還需要調整 package.json 文件，以便確保我們安裝包是私有的(private)，並且移除 main 入口。這可以防止意外發布你的代碼。
添加： "private": true,
刪去： "main": "index.js",
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
}
}
創建一個 bundle 文件
首先，我們稍微調整下目錄結構，將“源”代碼(/src)從我們的“分發”代碼(/dist)中分離出來。“源”代碼是用於書寫和編輯的代碼。“分發”代碼是構建過程產生的代碼最小化和優化後的“輸出”目錄，最終將在瀏覽器中加載：
webpack根目錄下創建一個dist文件夾，把index.html移動到dist文件夾下
要在 index.js 中打包 lodash 依賴，我們需要在本地安裝 library：
npm install --save lodash
現在，在我們的腳本中 import lodash，須更改部分src/index.js文件
src/index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash 引入以下 script 腳本
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
現在，由於通過打包來合成腳本，我們必須更新 index.html 文件。因爲現在是通過 import 引入 lodash，所以將 lodash <script> 刪除，然後修改另一個 <script> 標籤來加載 bundle，而不是原始的 /src 文件：
dist/index.html
<!doctype html>
<html>
<head>
<title>dist/index</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
執行 npx webpack，會將我們的腳本作爲入口起點，然後 輸出 爲 main.js。Node 8.2+ 版本提供的 npx 命令，可以運行在初始安裝的 webpack 包(package)的 webpack 二進制文件（./node_modules/.bin/webpack）：
npx webpack
在瀏覽器中打開 index.html，如果一切訪問都正常，你應該能看到以下文本：'Hello webpack'。