前言
1、什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。把各种游依赖关系的模块 ，打包成浏览器能够识别的文件，其思想就是万物皆模块，它能够将各个模块进行按需加载，不会导致加载了无用或者冗余的代码，所以它还有一个名字叫前端模块化打包工具。
2、webpack 有哪些功能? 为什么用webpack？
(代码转换 文件优化 代码分割 模块合并 自动刷新 代码校验 自动发布)。webpack可以使用webpack-dev-server本地开发，热更新模块化开发（import，require），打包后会干净的。例如有10个js文件，只用5个，那么其他文件文件不会打包上线发布。
3、webpack4.0和webpack3.0区别？
增加mode属性，可以是development或者production，设置打包环境，development可以获得最好的开发体验。
module.loader改为module.rules，module.loaders.loader改为module.loaders.use。
webpack4.0删除合并了CommonsChunkPlugin插件，webpack会默认为你生成共享代码模块。
学习
首先学习webpack的前提是电脑里nodejs的基础 ，如果没有安装node环境 请看我上篇随便https://www.cnblogs.com/xym0996/p/11898523.html 官方网站进行安装node, http://nodejs.cn/ 下载最新版node包并进行安装。
1、安装全局：
1 npm install webpack -g 2 npm install webpack-cli -g
2、查看版本：
1 webpack -version
3、创建项目：命名为web10的项目（进入项目目录）
4、安装依赖包
1 npm i webpack -D 2 npm i webpack-cli -D
5、新建源码目录src src目录里面建一个index.js的文件
6、打印 （随便写点代码 作为测试）
7、打包 命令webpack，
1 webpack --mode=development 2 webpack --mode=production
web10项目会自动生成一个dist目录
同时在dist目录建立一个index.html的文件 在引入main.js
运行index.html f12控制台
可以看到自己打印出来的123已经在控制台中出现
缺点
到这一步webpack已经可以正常的使用了，但是它有一个缺点就是不能实时的动态更新，所以你每次修改了src的
代码 都要webpack重新进行打包然后才能正常显示你要的数据，而且还有一个缺点就是html文件需要自己手动建，而
不是自动建并且帮你引入js文件，所以下一篇随笔会注入热更新的html动态生成的插件及代码。