Webpack在生产环境中有一个重要的作用就是减少http的请求数，就是把多个文件打包到一个js里，这样请求数就可以减少好多
1、安装
先装好node和npm，因为webpack是一个基于node的项目。然后
npm install -g webpack 全局安装
官方不建议全局安装webpack，所以还要进行本地安装
2、进入项目文件夹，比如webpack_demo，然后新建一个package.json的文件在项目根目录下
npm init //询问一些问题:按回车选择默认值 自动生成文件package.json
npm install --save-dev webpack //本地安装，
目前是开发环境，所以需要加上-dev，用户运行不需要依赖这个包
如果用户运行需要依赖这个包，那么就不加-dev，直接是--save，保存到生产环境
至此，webpack安装完成
3、在项目根目录下，建立
src源代码文件夹——开发环境
dist生产环境文件夹
./是当前目录
../是父级目录
/是根目录
3、在命令行中分别执行以下命令，安装对应的插件（--save-dev作用是安装的插件的同时，将插件名写入package.json的devDependencies列表中）
npm install webpack --save-dev
npm install jquery --save-dev
npm install style-loader css-loader --save-dev
npm install extract-text-webpack-plugin –-save-dev
4、webpack ./src/entery.js -o dist/bundle.js --mode development 在终端（命令行）中使用webpack打包
下面介绍使用配置文件进行打包
5、创建webpack.config.js
module.exports={
//入口文件的配置项
entry:{},
//出口文件的配置项
output:{},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
entry：配置入口文件的地址，可以是单一入口，也可以是多入口。
output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
module：配置模块，主要是解析CSS和图片转换压缩等功能。
plugins：配置插件，根据你的需要配置不同功能的插件。
devServer：配置开发服务功能，后期我们会详细讲解。
[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件
配置文件参数说明：
entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
output：对应输出项配置
path ：入口文件最终要输出到哪里，
filename：输出文件的名称
publicPath：公共资源路径
webpack：普通打包
webpack -p：压缩打包
webpack -p -w：监听所有需要打包的代码，只要有代码被改动并保存后，就会自动进行打包
6、热更新
a.在webpack.config.js里面配置devServer
devServer:{
contentBase:path.resolve(__dirname,'dist') //基本目录结构，监听哪里的代码
host:'10.1.28.102', //ip地址，不建议填localhost 命令行ipconfig查看ipv4的值即是ip地址
compress:true, //服务器压缩参数，是否启用服务器压缩，一般启用
port:1717 //任何喜欢的数字
}
b.安装服务：npm install webpack-dev-server --save-dev
c.配置package.json
"scripts": {
"server": "webpack-dev-server",
},
d.运行命令：npm run server
注意：是conteneBase，不是contentPath
运行命令是npm run server，不是webpack-dev-server
6、live-server
本地开发常常需要搭建临时的服务，第一时间我们会想到用http-server。
但现在流行修改文件浏览器自动刷新hot socketing（热拔插），如live-reload。
若想浏览器自动打开项目，用opener。
现在live-server实现了三个插件的所有功能，并且很简单就能启动一个看起来很专业的本地服务
初始化npm:npm init
安装live-server：cnpm install -g live-server
启动live-server：live-server
如果你比较懒，可以在package.json中增加start中增加新的脚本
"scripts": {
"server": "live-server ./ --port=9090"
}
然后执行 npm run server
浏览器会自动打开，并且当你修改本地文件，浏览器都会立即同步
7、const path = require('path');
path.resolve(__dirname,'dist'); //dist目录所在的绝对路径
8、模块：CSS文件打包Loaders
Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。通过使用不同的Loader，Webpack可以利用脚本和工具，从而对不同的文件格式进行特定处理。
注意：所有的Loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。
Loaders的配置参数：
test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）。
8.1、打包css文件，
首先在src文件夹下，建立一个css文件夹，在文件夹下需要打包的css文件
css文件建立好后，需要引入到入口文件中，才可以打包到，这里我们引入到entry.js中。
style-loader：用来处理css文件中的url()等
安装：npm install style-loader --save-dev
css-loader：用来将css插入到页面的style标签
安装：npm install css-loader --save-dev
两个loader都下载安装好后，我们就可以配置我们loaders了。
修改webpack.config.js中module属性中的配置代码如下（三种写法）：
第一种写法：直接用use。
module:{
rules:[
test:'/\.css$/',
use:['style-loader','css-loader']
]
}
第二种写法：把use换成loader。
module:{
rules:[
test:'/\.css$/',
loader:['style-loader','css-loader']
]
}
第三种写法：用use+loader的写法：
module:{
rules:[
{
test:/\.css$/,
use:[
{
loader:'style-loader'
},
{
loader:'css-loader'
}
]
}
]
}
9、插件配置：配置JS压缩
上线前，压缩js代码，通过使用插件的方式来实现
引入一个uglifyjs-webpack-plugin(JS压缩插件，简称uglify)。
注意：虽然uglifyjs是插件，但是webpack版本里默认已经集成，不需要再次安装，但是是需要引入的
在webpack.config.js里面引入
const uglify = require('uglifyjs-webpack-plugin');
引入后，在plugins配置里new一个uglify对象即可使用，
plugins:[ //注意是[]，不是{}
new uglify() //后面不加分号，多个的话加逗号
]
最后，在终端命令行，使用webpack进行打包，压缩js文件
npm run server用在开发环境，启动服务器，是对代码进行预览的，此时的代码
随时随地看视频
