安装
1,安装node.js （地址： https://nodejs.org/en/download/）同普通软件安装即可
终端上输入：node -v 、 npm -v即可查看当前安装版本
2，mac 下安装webpack直接使用npm install -g webpack 报错，解决方式：
sudo npm install webpack -g --unsafe-perm=true --allow-root
3,安装完webpack ，运行webpack -v会提示你安装webpack-cli ,命令
sudo npm install webpack-cli -g --unsafe-perm=true --allow-root
4，输入webpack-cli 会直接输出版本号，安装成功
安装cnpm:(可选)
sudo npm i -g cnpm --registry=https://registry.npm.taobao.org --unsafe-perm=true --allow-root
项目中使用：
1，初始化生成package.json文件
npm init -y
2,安装webpack到该目录：
npm install --save-dev webpack
npm install --save-dev webpack-cli
3，使用webpack 编译
4.0之后命令是：webpack ./src/app.js --output-filename bundle.js --output-path ./build
4，配置文件，使用webpack直接编译
webpack 配置文件在根目录下，名称为webpack.config.js
//配置文件
//执行webpack执行步骤
/**
* 1，首先webpack 发现，我们并没有通过的命令的形式给她指定入口和出口
* 2，webpack就会去项目的根目录中，查找一个叫做 webpack.config.js的配置文件
* 3，当找到配置文件后，webpack会解析执行这个配置文件，当解析完配置文件后，就得到了配置文件的配置对象
* 4，当webpack拿到配置文件之后，就拿到了配置对象中指定的入口和出口，然后进行打包构建
*/
5，使用webpack-dev-server实现自动打包功能
安装：npm install webpack-dev-server -D
使用配置：在package.json中添加配置
运行命令：npm run dev
删除掉本地的bundle文件，使用根路径的bundle
更改js文件之后，保存不需要刷新浏览器直接可以看到现象。
（在文件目录中看不到bundle.js文件，直接托管到了电脑的内存中，速度更快，可以认为与src dist 在同一级目录）
6，webpack-dev-server常用参数
webpack-dev-server --open 自动打开浏览器
webpack-dev-server --port 3000 设置端口
webpack-dev-server --contentBase src 打开主页
webpack-dev-server --hot 页面无刷新重载
第一种方式：在package.json中更新配置：
webpack-dev-server --open --port 3000 --contentBase src --hot
第二种方式：在webpack.config.js中配置：
const webpack =require('webpack')//启动热更新，第2步
7，html-webpack-plugin插件使用
作用：1，自动根据指定模版页面在内存中生成一个页面 2，自动把打包好的bundle.js追加到页面中
安装：npm i html-webpack-plugin -D
使用：在webpack.config.js中配置
const htmlWebpackPlugin =require('html-webpack-plugin')
（使用此种方式可以将页面中引入的bundle.js文件删除，会自动将该文件追加到页面）
8，loader使用
情景：页面中引入css会发起二次请求，不推荐。在js文件使用import '../css/index.css' 导入css文件，webpack编译会报错，它默认只能打包处理js文件，不能处理其他文件。如果处理其他类型文件，需要安装loader加载器
安装：npm i style-loader css-loader -D
使用：在webpack.config.js文件中进行配置
webpack loader的处理过程
less-loader，scss-loader使用
url-loader使用
安装：npm i url-loader file-loader -D
配置：在webpack.config.js中的moudle-rules添加
{test:/\.(jpg|png|bmp|jpeg)$/, use:'url-loader'}
传递参数：{test:/\.(jpg|png|bmp|jpeg)$/, use:'url-loader?{limit:1000}'}//限制是否转换为base64字符串
处理字体文件的处理:
{test:/\.ttf|eot$/,use:'url-loader' }
9，babel使用
情景：webpack 只能处理部分的ES6新语法，对于处理不了的语言结构需要借助loader把新语法转换成旧语法然后交给webpack进行打包处理
安装：第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
配置：
在项目跟目录新建.babelrc文件，配置如下：
然后重新启动项目即可正常显示。
webpack.config.js配置文件：
