一、前言
前提：nodejs安裝完成
版本問題：
在webpack 3中，webpack本身和它的CLI以前都是在同一個包中，但在第4版中，他們已經將兩者分開來更好地管理它們。
webpack4啓動命令時，會一直提示是否安裝webpack-cli，並且功能還沒有實現。
【解決方法】
二、PPT講解
三、實戰演練
【1】如何將js文件模塊化
1-1】
1、在新建的文件夾中打開終端，輸入
npm init
npm install [email protected] -g
2、在文件夾中新建src文件夾和index.html（src下有css和js文件夾）
3、在src下的js文件夾新建app.js和people.js文件
app.js
pepple.js
4、終端輸入
webpack app.js bundle.js
查看目錄會有bundle.js這個文件
sublime Text打開index.html(加載bundle.js)，網頁會有彈出“Hello Webpack”效果。
1-2】js文件有幾種方式可以將數據傳給app.js(以people.js爲例，這裏採用數組形式)
app.js
終端輸入
webpack app.js bundle.js --watch
項目cmd控制檯會一直監聽
此時打開index.html，瀏覽器控制檯會輸出“Herry”
當people.js代碼內容信息發生改變時，index頁面的js效果會隨之改變，cmd控制檯也會有信息提醒
1-3】在項目路徑下新建webpack.config.js（./webpack.config.js）
類似的，再次修改people.js的內容
此時終端輸入
webpack
會在項目子目錄dist生成 bundle.js (./dist/bundle.js)
注意: 此處之後index.html的js引入路徑發生改變
index頁面的瀏覽器控制檯會打印不同的信息
【2】使用第三方庫
2-1】使用jquery庫
終端輸入：
npm install jquery --save-dev
people.js
app.js
此時終端輸入
webpack
打開index頁面的瀏覽器，頁面會有三個h1標籤，內容分別是
Herry
Bucky
Emily
2-2】css模塊化
在src/css下新建style.css
終端輸入
npm install css-loader style-loader --save-dev
app.js新增
require("!style-loader!css-loader!./src/style.css")
這種方法不好用，僅對於單個css方便
此時終端輸入
webpack
瀏覽器打開index.html
【3】webpack.config.js
app.js新增css內容修改爲
此時終端輸入
webpack
使用package.json啓動項目
修改package.json
終端輸入
npm run build
發現同樣可以啓動項目
【4】搭建服務器
終端輸入
npm install webpack-dev-server -g --save-dev
修改package.json
終端命令，打開服務器
npm start
報錯
查了一下，原來是webpack 3.8.0與webpack-dev-server 的版本不兼容
卸載重裝webpack-dev-server
再次輸入npm start
可以啓動本地服務器了，網頁可以打開
修改代碼，服務器會同步數據信息
2-5】將es6轉換成es5
終端輸入
npm install babel-core babel-loader babel-preset-es2015 --save-dev
修改webpack.config.js
啓動項目
npm start
報錯
通過提示信息，可以知道babel-core與babel-loader8不兼容
改裝babel-loader7
構建項目
開啓服務器 npm start
people.js的let，到了bundle.js變成了var
