webpack

背景 项目使用脚手架 create-react-app 搭建的react工程。在这个工程里，webpack配置本身并没有暴露出来。这时候需要配置别名 alias ，用来定义引用路径，而不用一层一层用相

现象 使用webpack打包，包名使用chunkhash方式，在不同机器下构建同一份代码，hash值不同，也就是代码块的包名不一样 分析 查看打包出的map文件，发现_buildModule使用了绝对

生产|开发环境构建 不同环境config文件 开发环境和生产环境构建存在巨大差异，所以通常编写独立的webpack配置。但为了遵循不重复原则，我们又会存在common webpack配置为了将这些配置

webpack 是基于 nodejs 的， 所有的 nodejs 核心模块的 api 都可以直接引入使用。 集合 三石的webpack.config.js（基础篇） 三石的webpack.config

建议有一定基础后再阅读 官方文档 Babel是什么 Babel 是一个Javscript编译器，可以将高级语法(主要是ECMAScript 2015+ )编译成浏览器支持的低版本语法，它可以帮助你用最

devServer 我们都知道开发工作是一个连续的过程，特别是前端开发，我们需要不断的调整代码来实现UI效果，需要改动一个样式后，马上就能看到其在浏览器中的效果。这时候，通过webpack打包构建的方

概念 tree shaking，也称摇树。当你引入一个模块时，你可能用到的只是其中的某些功能，这个时候，我们不希望这些无用的代码打包到项目中去。通过tree-shaking，就能删除无用代码，以达到减

概念 loader 是一个Node.js模块，只是必须以函数格式导出来使用；它作用于符合条件的模块并按照一定格式输出符合webpack要求的模块。然后webpack将这些模块打包起来生成对应的js文件

概念 webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在编译过代码程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也

是什么 是Webpack 5 的新特性之一，允许在多个 webpack 编译产物之间共享模块、依赖、页面甚至应用 提供了一种轻量级的、在运行时，通过全局变量组合，在不同模块之前进行数据的获取 提供了一

webpack.config系列中没有单独成篇的，进阶的概念都会汇集在这里，比较基础的都会在 基础rest篇里 Externals 一般来说，会将第三方库打包到bundle中；如果不想这么做，就可以配

本章为 output 专栏，参考 output详细配置 这里只介绍常用的 filename 此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到output.path选项指定的目录

webpack.config系列中没有单独成篇的，比较基础的概念都会汇集在这里，稍微高阶点的都会在 进阶rest篇里 配置文件 一般情况下，webpack 的配置文件是 JavaScript 文件，文

依然只有部分参数 依据 mode 不同，执行的优化也不同 splitChunks 条件 webpack 会根据此值将文件拆分成多个 chunk 文件。默认情况下，它只会影响到 按需加载的 chunks

webpack中使用resolve字段来配置模块的相关解析策略。本质上是通过对resolve库的使用来解析引入模块路径，帮助 webpack 找到 bundle 中以require/import引入的

本章为 module 专栏 只介绍常用的 generator 可以使用 module.generator 在一个地方配置所有生成器的选项 parser 可以用 module.parser 在一个地方配