1. 先說下什么是WebPack？
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現后，Webpack還肩負起了優化項目的責任，目前已經到了4.x版本。
打包：可以把多個Javascript文件打包成一個文件，減少服務器壓力和下載帶寬。
轉換：把拓展語言轉換成為普通的JavaScript，讓瀏覽器順利運行。
優化：前端變的越來越復雜后，性能也會遇到問題，而WebPack也開始肩負起了優化和提升性能的責任。
2. 安裝WebPack
WebPack的安裝，采用的是命令行npm形式的安裝。
d://切到d盤
mkdir webpack_demo//在d盤下新建webpack_demo文件夾
cd webpack_demo//進入該文件夾下
npm install -g webpack //全局安裝webpack
（備注如果這樣安裝會出現提示安裝webpack-cli；這是4.x的提示，如果不想安裝webpack-cli需重新安裝低版本webpack）
npm uninstall -g webpack //先卸載之前安裝的webpack
npm install -g webpack@3.6.0 //安裝低版本webpack
全局安裝完成后，我們還要進行一個項目目錄的安裝。在用npm安裝前，我們先要進行一下初始化，
初始化的主要目的是生成package.json文件（這是一個標准的npm說明文件，里面蘊含了豐富的信息，
包括當前項目的依賴模塊，自定義的腳本任務等等，如果你對此文件還不了解，可以看看node 的相關知識）。
npm init//初始化項目，可以一路回車生成的package.json文件
npm install --save-dev webpack@3.6.0 //官方不太支持全局安裝，會鎖定版本，因此對項目目錄安裝
安裝完成后可以查看版本號 webpack -v
安裝完成后新建webpack.config.js配置文件基本配置
const path=require('path');
const uglify=require('uglifyjs-webpack-plugin');//代碼壓縮
module.exports={
//入口文件的配置項
entry:{
entry:'./src/entry.js',
//這里我們又引入了一個入口文件
entry2:'./src/entry2.js'
},
//出口文件的配置項
output:{
//輸出的路徑，用了Node語法
path:path.resolve(__dirname,'dist'),
//輸出的文件名稱
filename:'[name].js'
},
//模塊：例如解讀CSS,圖片如何轉換，壓縮
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]//處理樣式的loader
}
]
},
//插件，用於生產模版和各項功能
plugins:[
new uglify()//代碼壓縮
],
//配置webpack開發服務功能
devServer:{
//設置基本目錄結構
contentBase:path.resolve(__dirname,'dist'),
//服務器的IP地址，可以使用IP也可以使用localhost
host:'localhost',
//服務端壓縮是否開啟
compress:true,
//配置服務端口號,可自定義
port:1717
}
}
（備注：安裝webpack-dev-server時安裝完后，運行報不是內部指令，需要在package.json中配置下）
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
如果還是報不是內部指令，則重新安裝低版本 npm i webpack-dev-server@2.9.1
npm install --save-dev webpack