终究是抵不过webpack的诱惑来分享webpack了，Element已经是旧爱了，但是我是不会舍弃他的。
接下来的话就简单的讲一下webpack吧
1 webpack是什么
webpack是一种前端资源的构建工具，一个静态模块的打包器。
在webpack看来，前端的所有资源文件 js、json、css、img、.... 都会作为模块处理。
他将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。
什么叫做 构建工具 :
比如我们执行一些例如TypeScript/ES6 去代替 Javascript、JS或CSS压缩、用Less去写CSS、等等的一系列 这些操作如果我们一遍遍手动执行，非常耗费时间和精力，所以构建工具，就是用来让我们不再做机械重复的事情，解放我们的双手的。 简单的来说就是把一堆小工具放到一个大工具里面，然后我们只要考虑这个大工具就行了
2 webpack 五个核心概念 !
一 Entry
入口（Entry）指示Webpack是以那个文件来作为入口起点开始打包，并分析构建内部依赖图。
二 Output
输出（Output） Webpack打包后的资源输出到哪里去（A盘、B盘、还是C盘？），以及命名。
将所有的资源(assets)归拢在一起后，需要告诉 webpack 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。
三 Loader
Loader让Webpack能够去处理那些非js的源文件（JSX，Scss，Less..） webpack自身只能理解javaScript （这里我称他为 翻译官）。
webpack默认只能处理js模块，那要是用户 import一个图片，webpack处理不了，那不就很尴尬了，所以才有了loader机制，So，loader其实就是处理模块的，如果图片有 file-loader，vue文件有 vue-loader 等...
四 Plugins
Plugins(插件（干活的人！）)可以做比loader更多的事情，简单的来说就是，更难、更复杂、执行范围更广的任务就给Plugins来做，比如一些打包优化，压缩，等等loader干不了的事情。
CommonsChunkPlugin: 将chunks相同的模块代码提取成公共js
CleanWebpackPlugin: 清理构建目录
ExtractTextWebpackPlugin: 将css从bundle文件里提取成一个独立的CSS文件
CopyWebpackPlugin: 将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin: 创建html文件去承载输出的bundle
UglifyjsWebpackPlugin: 压缩js
ZipWebpackPlugin: 将打包出的资源生成一个zip包
这些任务都是交给Plugins来做的
五 Mode
模式Mode 指示 Webpack 使用相应模式的配置
| 选项 | 描述(自动) | 特点 |
|---|---|---|
| deveLopent（开发模式） | 会将process.env.NODE_ENV的值设为devlopment。 启用NamedChunksPlugin和NamedModulesPlugin | 能让代码本地测试运行的环境 |
| production （生产模式） | 会将process.env.NODE_ENV的值设为production 启用 FlagDependencyUsagePlugin、flagincludeChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin、OccurrenceOrderPlugin、SideEffectSflagPlugin和UglifYjsPlugin | 能让代码优化上线运行的环境 |
开发模式的话 总体来说是注重于开发测试
生产模式的话 更加的注重于效率和性能
3 总结
一 由来
由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐，然后 Instagram 团队就想让这些工作自动化，然后webpack应运而生。
二 作用
对 CommonJS 、 AMD 、ES6的语法做了兼容
对js、css、图片等资源文件都支持打包（适合团队化开发）
比方你写一个js文件，另外一个人也写一个js文件，需要合并很麻烦，现在交给webpack合并很简单
有独立的配置文件webpack.config.js
可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
具有强大的Plugin（插件）接口，大多是内部插件，使用起来比较灵活
