项目中引入了css文件，配置了 rules 中：在执行 webpack 命令时，发生错误，报错信息：Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError,经查询，是loader顺序不正确导致此问题，修改后如下：

nodejs的出现对于构建工具具有重要的意义，在没有nodejs之前，js只能执行在浏览器环境下，所以意味着对发布前的js文件要进行处理，十分局限，没有打包工具，只能用PHP脚本来处理文件

webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

optimization.namedModules 这个配置对于调试起来很方便，比如原本生产的一段代码是长这样的：很多奇怪的数字，比如最后几行的 [0，0] 是表示了什么意思？如果配置上namedModules 为true呢

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化，让我们可以把复杂的程序细化为小的文件;

随着前端项目复杂程度越来越高，依赖也越来越多，为了提高项目中代码的可复用性，前端开始提出模块化开发的思路，前端模块化会有以下几个痛点：命名冲突,文件依赖,代码复用

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 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。