一、webpack是什么？
本质上,webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler)
二、webpack能干什么？
模块化的打包：让css,html,js变成一行，可以去掉注释，去掉多余引号等。
三、如何安装webpack
//如果有cnpm直接可以用cnpm安装
//这是是在百度搜索的，可以直接安装cnpm
1）全局安装
npm install webpack webpack-cli -g
//接下来随便创建一个文件夹然后cd进入到这个文件夹，输入npm.init生成package.json
//package.json: 就是管理你本地安装的npm包,用于定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。
2）生成package.json
npm.init（初始化)
3）局部安装
npm install webpack webpack-cli -S
4）打包：webpack
默认entry:src/index.js
默认output:dist/main.js
//此时我们在文件夹里面新建一个src的文件夹，在src文件夹里面新建index.js文件（名字随便起就可以）
//打开index.js文件，可以随便在控制台打印一个,console.log(111).
//打包完成之后会在文件夹中看到默认的dist/main.js文件
5）压缩： webpack --mode production
未压缩：webpack --mode development
四、webpack.config使用
1）webpack本身是打包js文件的，但是如果我们想要打包css,html等等怎么办？这是必须要进行相关的配置(在webpack.config.js进行相关配置)
2）配置（可以参照webpack官方文档https://www.webpackjs.com/）
1>webpack四个核心概念
入口（entry）
输出（output）
loader:
webpack只支持js,不支持css,图片等，如果让webpack支持需要使用loader
插件（plugins）
有效的打包或者压缩css,js,html,图片
2>配置文件
命名：webpack.config.js
步骤：如同前面的步骤一样，然后新建一个webpack.config.js文件来进行配置，然后可以自己新建一个出口文件夹，public文件夹，里面新建一个bundle.js
//在git bash里输入webpack打包，就可以在自己创建的bundle.js里卖弄看到压缩的
5、webpack配置webpack-dev-server
1）webpack-dev-server是一个用来快速搭建本地运行环境的工具。命令简单webpack-dev-server或配置命令脚本快捷运行。
2）安装webpack-dev-server
npm install webpack-dev-server -S
3）配置webpack.config.js:
devServer:{
contentBase:"",
inline
port 等等
}
打开package.json，在scripts中配置
在public里面新建一个index.html文件，引入bundle.js
在git bash里输入npm run dev
五、loader加载程序
1）loader的配置
1>引入css需要 style-loader、css-loader
2>下载：npm install style-loader css-loader -S
3>引入图片需要 file-loader
4>下载：npm install file-loader -S
5>webpack loader列表：https://blog.csdn.net/keliyxyz/article/details/51649429
步骤：1、下载npm install style-loader css-loader -S
2、在src文件夹里面新建一个style.css文件，随便写入一个样式
3、在index.js中引入.css文件
4、打开webpack.config.js文件
5、输入npm run dev自动打开网页，就会看到body背景颜色变为蓝色
//图片的操作是一样的
六、插件
1、html-webpack-plugin
1）插件的基本作用就是生成html文件。
2、使用webpack.config.js
1）安装（下载）
install html-webpack-plugin -S
2）配置（webpack.config.js）
1> const HtmlWebpackPlugin = require("html-webpack-plugin");
2>plugins:[
new HtmlWebpackPlugin({
template:"./src/index.html",
minify:{
removeAttributeQuotes:true,//去除引号
removeComments:true,//去除注释
removeEmptyAttributes:true,//去除空属性
collapseWhitespace:true//去除空格
}
})
步骤：1、在src文件夹里面新建index.html文件。
2、安装cnpm install html-webpack-plugin -S
3、打开webpack-config.js配置
4、执行webpack,就会看到public里面多出了index.html文件
六、Babel
1、介绍：Babel是一个JavaScript编译器，可以把ES6的语法转为兼容浏览器的ES5语法
2、安装（下载）:npm install babel-core babel-loader babel-preset-env babel-preset-react -S
3、配置
第一种方式：放到rules里面
webpack.config.js
{
test:/(\.jsx|\.js)$/,
use:{
loader:"babel-loader",
options:{
presets:["env",'react']
}
},
exclude:/node_modules/
}
第二种方式：
新增.babelrc文件
{
"presets":['env','react']
}
步骤：1、安装npm install babel-core babel-loader babel-preset-env babel-preset-react -S
2、打开index.js文件，进行ES6的编辑.
3、在打开public里面的.js文件，就会发现let变成了var，表示成功。