1. 安裝：
為了更好的理解npm，我們運行下面兩行命令：
npm config set loglevel http // 讓我們知道運行的每一個npm命令 npm config set progress false // 關閉那個進度條
為了使安裝的速度更快，我們使用淘寶的鏡像：
npm config set registry https://registry.npm.taobao.org/
這個配置會在我們設置npm adduser的時候出現問題，使用 npm config delete registry 恢復原樣。
然后我們開始安裝webpack，npm i -g webpack ，如果報錯說有權限問題，換成 sudo npm i -g webpack，windows用戶沒有sudo，使用管理員身份運行git bash ，再運行安裝命令。
檢測我們是否安裝成功：webpack --help。當出現各種參數的解釋時，說明安裝成功。
2. 參照webpack的官網指南，我們試着做一個。
首先，新建一個文件夾： mkdir webpack-demo 並進入 cd webpack-demo
然后創建一個package.json文件：npm init -y
安裝npm install --save-dev webpack
接着，按照官網上的文件結構，創建各種文件：
i. 在app/index.js這樣寫：
function component(){ var element = document.createElement('div'); element.innerHTML = _.join(['Hello','Webpack'],'') // _ 是引入的lodash的暴露的全局變量 return element; } document.body.appendChild(component());
ii. index.html這樣寫：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/lodash@4.16.6"></script> // 引入lodash <title>Getting Start</title> </head> <body> <script src="./app/index.js"></script> </body> </html>
這是最古老的引入一個JS文件的方法，接下來我們使用高級一點的寫法。
i. 在webpack-demo的目錄下，安裝lodash，npm install --save lodash。這時發現會出現一個新的文件夾node-modules，lodash就在這個文件夾下。
ii. 然后把index.html中引入lodash的src刪掉，在app/index.js里面加上一行引入，import _ from 'lodash' ;（import的語法）
iii. 把index.html中的
<script src="./app/index.js"></script> 換成
<script src="./dist/bundle.js"></script>
iv. 在webpack-demo下執行命令：webpack app/index.js dist/bundle.js（方方的教程里說執行這個./node_modules/.bin/webpack app/index.js dist/bundle.js 命令，但是我的不好用）
v. 然后在瀏覽器中打開這個index.html，頁面上顯示出了 Hello Webpack就成功啦。
3. 優化：
每次預覽效果都要執行 webpack app/index.js dist/bundle.js，很煩，優化的辦法，在根目錄webpack-demo下，新建並編輯webpack.config.js（web pack的配置文件），寫入：
var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
然后，命令變成了 webpack --config webpack.config.js，還是很長啊，繼續優化。修改文件package.json，加一句：
然后運行 npm run build ，效果一樣。說明運行npm run build相當於運行node-modules下的webpack可執行文件，然后可執行文件會去webpack.config.js里找入口文件，出口文件的。
bundle.js文件很大，我們可以使用webpack -p命令壓縮一下
webpack -p dist/bundle.js
繼續，如果我們想要每次只敲一次代碼，webpack自動build 就好了。修改package.json，添加一個npm scripts
然后我們運行 npm run dev 就會發現不退出，修改一下代碼webpack自動build，我們只需要刷新一下瀏覽器的頁面就好了。
再優化，要是可以自動刷新瀏覽器那就更完美了。解決方法，用npm安裝webpack-dev-server；然后修改package.json
還需要修改index.html
然后執行npm run dev，就會發現自動彈出了瀏覽器，也自動刷新了。