一：webpack是什么？
webpack是一个打包工具，可以打包html.js.css等文件，使得文件压缩等好处
二.webpack的安装与使用
1.下载webpack软件包
--save-dev是开发环境中使用。
2.配置命令
在package.json文件中配置命令
三.执行命令，npm run bulid（自定义的命令）（只要在文件夹下即可）
执行的命令必须写在package.json内，只写webpack没有噢
默认情况下，webpack打包是会找node_modules目录所在文件夹下的src文件夹下的index.js
文件进行打包，打包默认输出到该目录下的dist文件夹下的main.js文件。
三：webpack构建工具的配置项
1.打包入口和出口
在webpack.config.js文件下导出的对象配置entry是webpack打包时的文件入口，output是打包之后文件打包输出的文件名和位置，用对象的path表示文件夹，filename表示文件名，文件名也可携带目录。且filename的相对路径是对于path的路径而言。webpack构建工具打包时是打包入口引入的会跟着打包。__dirname在打包时是根目录，但是执行node是执行文件前面的路径。相对路径是相对path路径。清空所在path目录的文件。
2.自动生成html文件
不配置，则只会打包入口文件，生成文件，但是无法自动生成与打包无关的html文件，可以生成html文件，且生成的html会自动引入生成的文件。
1.下载软件包
2.配置
在webpack.config.js文件下配置
需要软件包导出的构造函数，写了plugin配置项，看见对象，能有效果，模板文件是生成的文件会和模板文件内容一样，但是引入了打包后的文件。打包后的文件，之前没打包的引入了，最后都会在打包后的文件内，即使是css文件。.是包括dist的文件夹。
在filename是dist下的文件夹。template是dist文件夹。
3.打包css文件
当引入了css文件，需要有对应的加载器等才能将css文件，打包压缩。
JS文件无需，默认可以加载js文件。
配置成以下形式。test后面的值是正则表达式。下载软件包，在use下写软件包的名字。引入css文件，webpack不打包html，可以生成html
4.第三种方式，可以对引入的css文件进行打包，但是打包的时候是将css文件写到js内，
我们将打包css时，可以打包之后的css独立存在，引入到js内。
1.下载软件包
2.配置项
生成的默认时main.css且在输出文件的path下。
5.提取独立的css文件且文件压缩
1）.下载软件包
2）独立文件的基础上，写这个配置项，生成独立css，且css压缩。
原本没写，默认是minimizer内有js的压缩，最小化，写在重写，不是默认，全部都要写上。
6.打包less代码
我们打包，除了JS文件，都需要配置使得能引入，打包，但是less文件，我们最后打包都是变成css文件，语文不需要存在less文件，因此，只需要安装软件包，需要处理less文件时如何。变成css就行，plugin，会将此变成css文件独立。
写use的时候要按顺序，less-loader在css-loader先执行，css-loader要在其他先执行，放后面，后面先执行。
7.打包图片
打包图片，当图片呗当成背景图引入，作为字符内的无法引入，必须是css内的。亦或import obj from 图片，导入图片，且导入时，有
变量则配置以下能导入图片，type有多种模式，filename是文件名，
asset文件体积以8kb为界限。有全局变量的导入的，如果是小于8kb导入dataurl，如果大于8kb，全局变量是url，且生成url。
8.webpack搭建开发环境
1.在webpack.config.js下增加mode：‘none','production','development'三种模式，则可以使得所有命令是在这种模式下，只有在开发模式下才能有热更新，才能执行热更新命令，dev。
热更新命令需要安装
2.在package.json命令后增加环境。
这种比第一中优先级高。
打包模式：开发环境
我们之前那一种webpack命令，需要自己打开打包后的html文件，但是现在我们可以搭建一种环境使得能自己打开且无需改变原代码再次打包的缺点。
安装软件包，改变mode变成开发环境，热更新在开发环境中，在package.json内自定义命令，value的值是确定的需要这几个命令，webpack serve --open。
之后便可用 npm run dev 可以热更新。
9.根据何种环境来使其不同
安装cross-env软件包，写命令是以上，可以改变全局变量process.env.NODE_ENVD
的值，再在webpack内使得不同时代码不同，css打包之后不同。
10.注入环境变量
四：webpack打包的特点
webpack打包在某个目录下，即使文件名相同，之前打包的也不会删除，而是之后的覆盖了之前的。