Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。这样可以避免一个网页在加载的时候发起很多的二次请求，导致网页加载慢。Webpack是基于Node.js开发的，所以使用Webpack必须使用Node。
将各种js和css等资源文件分类打包，减少资源相互的依赖关系。WebPack中文文档
一，Webpack的安装
在安装 Webpack 前，本地环境需要支持 node.js
npm install webpack -g 全局安装
npm install webpack@3.5.5 -g --unsafe-perm 全局安装指定版本
npm uninstall webpack -g 卸载
二，Webpack处理浏览器不能识别的js文件
案列：使用jquery隔行换色
2.1安装jquery
2.2 main.js作为js文件的入口，引入jquery
2.3 index.html的script标签不在直接引入jquery,而是引入main.js,因为main.js是js文件的入口文件
2.4 但是当打开浏览器时候发现不能隔行换色应为浏览器不识别ES6的语法。
2.5 这个时候可以通过Webpack来对浏览器不识别的语法进行处理；
2.6 index.html重新引入编译的bundle.js
三，webpack.config.js的配置文件
第二步中我们的隔行换色的样式引入的是经过main.js打包后的bundle.js文件，但是我们的样式代码还是在main.js文件中编写，当我们改了main.js文件中的代码的时候,不会及时生效需要我们再一次执行webpack .\src\main.js .\dist\bundle.js命令，这个时候想简化下，就可以通过webpack.config.js配置文件来指定打包入口和出口文件，来简化打包命令。
四，webpack-dev-server的是使用
在实际开发中我们会频繁的修改代码，看页面的渲染效果，如果在第三步中我们需要频繁的手动执行webpack命令，而webpack-dev-server就可以帮我们实现修改代码后的热更新。
4.1 安装webpack-dev-server到本地开发依赖
npm i webpack-dev-server -D
注意: 使用webpack-dev-server工具时要求，webpack也要进行项目的本地安装 cnpm i webpack -D，全局安装的webpack不行
4.2 配置npm run dev启动命令,实现代码热更新代码
4.3 webpack-dev-server简单的配置命令方式一
--opennpm run dev 启动成功后自动打开浏览器。
--port指定启动时候的端口号。
--hot热重载，修改代码，webpack-dev-server会热编译。但是浏览器还是要手动刷新，加上配置后，会自动刷新浏览器。
4.4 webpack-dev-server简单的配置命令方式二
五， html-webpack-plugin
作用：1.在内存中生成一个页面。2，将我们第二步时候的那个bundle.js文件自动追加到页面中去
5.1 安装 html-webpack-plugin
npm i html-webpack-plugin -D 项目本地安装
5.2 配置html-webpack-plugin
六，第三方loader处理样式
webpack默认只能打包处理.js的文件，当有.css，.less等文件的时候会报错，这个时候就需要第三方loader的加载器
6.1 项目本地安装 npm i style-loader css-loader -D
6.2 在webpack.config.js文件中配置第三方模块加载器
由于每个人的环境版本不同，各种配置和报错也会不同，所以此篇文章仅供学习参考。