webpack 从入门到放弃！

于2012年3月10号诞生，作者是(德国) 。参考GWT( Web )的code 功能在中进行实现。然后在2014年团队分享性能优化时，提出使用的code 特性从而大火。现在的出现模糊了任务和构建的边界在出现之前，我们使用gulp、grunt做任务的，构建是用其他工具实现，而现在使其融为一体。
之前我们在html加载js资源的时候，需要使用标签，加载css也需要编写css文件进行加载，这样我们每次html加载的时候就需要加载多个资源。而将所有的资源都打包到js中，会有一个entry入口文件,entry引入了js、css等资源文件，打包到一个文件中，这样就加载一个资源。
最初核心解决的问题就是代码合并与拆分，它的核心理念是将资源都视为模块，统一进行打包和处理，然后再按规则进行拆分，提供了和完成功能扩展。
知识体系:
核心概念项目初始化流程创建npm项目安装依赖和-cli创建js入口文件创建配置文件配置.json的build命令执行npm run build 打包工作模式
4 新增了一个工作模式的用法，这种用法大大简化了配置的复杂程度。你可以把它理解为针对不同环境的几组预设配置：
针对工作模式的选项，如果你没有配置一个明确的值，打包过程中命令行终端会打印一个对应的配置警告。在这种情况下将默认使用模式去工作。
模式下内部会自动启动一些优化插件，例如，自动压缩打包后的代码。这对实际生产环境是非常友好的，但是打包的结果就无法阅读了。
修改工作模式的方式有两种：
上述三种工作模式的详细差异我们不再赘述了，你可以在官方文档中查看：
打包结果运行原理
为了更好的理解打包后的代码，我们先将工作模式设置为 none，这样就会按照最原始的状态进行打包，所得到的结果更容易理解和阅读。
按照 none 模式打包完成后，我们打开最终生成的 .js 文件，如下图所示：
我们可以先把代码全部折叠起来，以便于了解整体的结构
整体生成的代码其实就是一个立即执行函数，这个函数是工作入口（），它接收一个参数，调用时传入了一个数组。
展开这个数组，里面的元素均是参数列表相同的函数。这里的函数对应的就是我们源代码中的模块，也就是说每个模块最终被包裹到了这样一个函数中，从而实现模块私有作用域，如下图所示：
我们再来展开工作入口函数，如下图所示：
这个函数内部并不复杂，而且注释也很清晰，最开始定义了一个对象用于存放或者缓存加载过的模块。紧接着定义了一个函数，顾名思义，这个函数是用来加载模块的。再往后就是在函数上挂载了一些其他的数据和工具函数，这些暂时不用关心。
这个函数执行到最后调用了函数，传入的模块 id 为 0，开始加载模块。模块 id 实际上就是模块数组的元素下标，也就是说这里开始加载源代码中所谓的入口模块。
资源模块加载
想要实现的是整个前端项目的模块化，项目中的各种资源（包括 CSS 文件、图片等）都应该属于需要被管理的模块。换句话说，不仅是模块打包工具，还是整个前端项目（前端工程）的模块打包工具。也就是说，我们可以通过去管理前端项目中任意类型的资源文件。
首先，我们尝试通过打包项目中的一个 CSS 文件，将配置中的入口文件路径指定为 main.css 的文件路径，让直接打包 CSS 资源文件，具体配置如下所示：
module.exports = {// 样式文件路径entry: './src/main.css',output: {filename: 'bundle.js'}}
配置完成过后回到命令行终端运行打包命令，此时你会发现命令行报出了一个模块解析错误，如下所示：