1.安裝
新建一個文件夾如webpack-demo，使用npm init 命令可以自動創建這個package.json文件,這是一個標準的npm說明文件，里面包含許多信息，包括當前項目的依賴模塊，自定義的腳本任務等等。
為了方便也可以使用 npm init -y
2. 安裝webpack
2種選其中一個（推薦本地安裝）
全局安裝
npm install -g webpack
本地安裝
npm install webpack webpack-cli --save-dev
-dev代表安裝在開發環境
如果出現報錯，可以直接選擇安裝具體的版本，比如npm install --save-dev webpack@3.8.1
3. 開始
現在我們的webpack-demo文件夾會有node_module這個文件和package.json文件。
我們在當前目錄下新增index.html文件，src文件夾，并在src文件夾中增加index.js，得到下面這個文件目錄
webpack-demo文件夾
|- /node_module
|- package.json
+ |- /dist
|- index.html
+ |- /src
+ |- index.js
dist/index.html內容如下
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
src/index.js 內容如下
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());`
4.把本地 src/index.js 打包成 dist/bundle.js
通過命令./node_modules/.bin/webpack 入口路徑 打包路徑
比如：./node_modules/.bin/webpack src/index.js dist/bundle.js
那么問題來了，如果文件很多這樣打包，命令行是不是顯得特別繁瑣。所以我們可以通過
配置文件的方式來打包，把入口文件和打包路徑寫在webpack.config.js文件中.
5 webpack.config.js配置文件
在當前目錄下新建一個webpack.config.js文件。
webpack.config.js文件內容
const path = require('path');
module.exports = {
entry: './src/index.js', //入口文件
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist') //打包后的地址
}
};
6 NPM Script
雖然文件名這個比較問題解決了，但是.node_module/.bin/webpack其實寫起來也很不方便，所以我們可以設置一個快捷方式。在 package.json 添加一個 npm 腳本(npm script)：
打開package.json文件：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack" //npm script 會自己去找node_module下面的webpack，所以可以簡寫為webpack
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
現在，可以使用 npm run build 命令進行打包了。
打包完成之后可以使用瀏覽器或者服務器，打開dist/index.html
