一、webpack 基础概念理解
- 本质上，
webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。webpack支持AMD(RequireJS)、ES Modules和CommonJS等模式，如图所示：
-
webpack在V1时，功能主要为 编译、打包，HMR(模块热更新)，代码分割和文件处理。 -
webpack在V2时，功能进化为Tree Shaking，ES module，动态Import和新的文档。 -
webpack在V3时，功能进化为Scope Hoisting作用域提升和Magic Comments配合动态import使用，Scope Hositing是Webpack 3的标志性特征。 -
webpack核心概念分为Entry、Output、Loaders、Plugins和 模式。 -
Entry是指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的，最后输出到称之为bundles的文件中。Entry是 代码的入口、打包的入口，单个或多个。 -
Output是告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist。Output是 打包成的文件(bundle)、一个或多个、自定义规则 和 配合CDN。 -
Loaders是 让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理。Loaders是 处理文件和转化为模块。常用的loader，编译相关有babel-loader、ts-loader等等，样式相关有style-loader、css-loader、less-loader、postcss-loader等等，文件相关有file-loader、url-loader等等。 -
Plugins是从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。. Plugins是参与打包整个过程、打包优化和压缩、配置编译时的变量和极其灵活。常用Plugins，优化相关有CommonsChunkPlugi、UglifyjsWebpackPlugin等等，功能相关有ExtractTextWebpackPlugi、HtmlWebpackPlugin、HotModuleReplacementPlugin和CopyWebpackPlugin等等 -
模式是通过选择
development或production之中的一个，来设置mode参数，你可以启用相应模式下的webpack内置的优化。