一、什么是webpack
是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
二、安装和命令行
1、新建一个目录，进入目录，初始化
2、安装
全局安装
在输出版本时，显示，要安装webpack-cli
这样就能输出版本，可以看到我安装的是4.2.0，这里要注意，自webpack4之后，使用有很大的变化
局部安装
（1）练习（坑）：处理js文件，在项目根目录下，新建hello.js，然后打包
显示没有配置webpack的mode选项，默认有production和development两种，我们输入
依然有错：未找到入口模块发成错误，
这是因为webpack4.x是以项目根目录下的./src/index.js作为入口，所以我们要新建src目录且改hello.js为index.js
这里还要注意：
webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack –mode development或者webpack –mode production，这样便会默认进行打包，入口文件是’./src/index.js’，输出路径是’./dist/main.js’，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。
因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行
这样便能实现打包。
每次这样写是不是都点麻烦，我们可以在package.json中
每次执行就可以：
（2）练习：处理css文件
新建一个css文件style.css，在index.js中引入
然后打包：
会报如上错误，是因为webpack不支持css文件类型，需要依赖loader
css-loader：使webpack可以处理css文件
style-loader：新建一个style标签，把css-loader处理过的文件放进去，然后插入到HTML标签中
安装之后使用（直接在文件前）：
或者（在命令行）：
那每次更新都要执行一次，有没有自动更新的？？？
（3）其他参数：
–progerss：会出现打包过程，有百分比进度条
–display-modules：会把所有打包的模块列出来
–display-reasons：会把打包的原因列出来
三、webpack的配置
（1）新建一个项目并初始化
上面：将会打包。。。main.js文件到。。。bundle.js文件
多文件输入：
四、自动生成HTML页面文件
（1）安装html-webpack-plugin插件
（2）在webpack配置package.config.js中
（3）传参使用
1、参数
在根目录下的index.html中
生成的dist/index.html中
2、上线地址
在生成的index.html中
3、html压缩
4、多页面应用，生成多个html文件
五、loader的配置
1、解析es6语法
（1）安装babel
（2）配置webpack
2、解析css
（1）安装style-loader和css-loader
（2）配置webpack
（3）在项目中经常有类似-webkit的前缀，每次写很麻烦，这里就要用到postcss-loader,后处理loader
配置webpack
新建一个postcss.config.js文件和webpack.config.js同级
此时，如果你打包，并不会报错，但是前缀可能也没有，所以需要在package.json中加入
3、解析less
（1）安装
（2）webpack的配置
4、解析sass
sass的使用和less一样，只要把less改为sass就行了
5、处理html模板文件
（1）安装html-loader
（2）配置
（3）使用
layer.js
app.js
6、使用ejs模板文件，后缀为tpl或ejs
（1）安装
（2）配置
（3）使用
layer.tpl
layer.js
app.js
7、用file-loader处理图片
（1）安装
（2）配置
（3）使用
layer.less
若是在.tpl或.ejs中使用
（4）也可以加参数
8、使用url-loader处理图片（会影响文件大小）
9、通过image-webpack-loader和url-loader结合：先有image-webpack-loader打包，在通过url-loader
