一、前言
前提：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
