Webpack从基础概念到项目配置，涉及知识点较多，现将学习使用过程中遇到内容记录下来，方便以后速查。Webpack是一个模块打包工具，在Webpack里一切文件皆模块。通过loader转换文件，通过plugin注入钩子

安装webpack4最新版本；这个在webpack3中，webpack本身和它的CLI是在同一个包中，webpack4中将两个分开管理。记得添加mode用来告知 webpack 使用相应环境的内置优化

为了使用tree shaking，需要满足以下条件：使用ES2015语法(即import和export)，在项目package.json文件中，添加sideEffects入口，引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如：UglifyJSPlugin)

减少resolve解析；把 loader 应用的文件范围缩小,只在最少数必须的代码模块中去使用必要的 loader；减少 plugin 的消耗,webpack 的 plugin 会在构建的过程中加入其它的工作步骤

Webpack已经流行好久了，但很多同学使用webpack时还是一头雾水，一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例外，以至于很长一段时间对webpack都是一知半解的状态

output输出口必须是个对象，因为它必须有两个属性：filename输出出去的文件的名字，一般都是bundle.js，path文件要输出出去到哪里，一般都是dist文件，那如果我们是多页面引用，那上面这个输出就不行了

在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具。它打包开发代码，输出能在各种浏览器运行的代码，提升了开发至发布过程的效率。主要包含入口（entry）、输出文件（output）、模式、加载器（Loader）、插件（Plugin）等几个部分

Code Splitting是webpack的一个重要特性，他允许你将代码打包生成多个bundle。对多页应用来说，它是必须的，因为必须要配置多个入口生成多个bundle；对于单页应用来说，如果只打包成一个bundle可能体积很大，导致无法利用浏览器并行下载的能力

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问

多页面配置通常有两种形式，一种是多页面多配置，一种是多页面单配置。因为webpack（3.1以上）可以直接处理一个配置对象的数组，所以可以为每个页面单独写一份配置。

loader定义: 用于对模块的源代码进行转换。loader 可以使你在 import 或\\\"加载\\\"模块时预处理文件,loader是一个node模块，编写loader时要遵循单一原则，每个loader只做一种\\\"转义\\\"工作

webpack配置文件默认情况下为webpack.config.js,即用原生js语法书写的配置文件。然而，在我们的项目中，有时候是使用的是其他语言语法进行编程，例如：es6、coffeeScript、typeScript等语言语法。

tapable是webpack的核心依赖库 想要读懂webpack源码 就必须首先熟悉tapable。ok.下面是webapck中引入的tapable钩子 由此可见 在webpack中tapable的重要性

本地开发构建’自然离不开webpack，webpack想要工作，那它就需要各种插件的支持，有不少童鞋在平时的项目开发中使用过Webpack Plugins，这篇文章整理总结常用的webpackPlugin插件