webpack优化

查看所有文档页面： 全栈开发 ，获取更多信息。

原文链接： webpack优化 ，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。

优化开发体验

1. 优化构建速度 。在项目庞大时构建耗时可能会变的很长，每次等待构建的耗时加起来也会是个大数目。

   • 缩小文件搜索范围
   • 使用 DllPlugin
   • 使用 HappyPack
   • 使用 ParallelUglifyPlugin

2. 优化使用体验 。通过自动化手段完成一些重复的工作，让我们专注于解决问题本身。

   • 使用自动刷新
   • 开启模块热替换

webpack原理

查看所有文档页面： 前端开发文档 ，获取更多信息。
原文链接： webpack原理 ，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。

工作原理概括

基本概念

在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解：

• Entry ：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Module ：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Chunk ：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader ：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin ：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

webpack实战

查看所有文档页面： 全栈开发 ，获取更多信息。

快马加鞭，加班加点，终于把这个文档整理出来了，顺便深入地学习一番，巩固知识，就是太累人，影响睡眠时间和质量。极客就是想要把事情做到极致，开始了就必须到达终点。

原文链接： webpack实战 ，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。

本章教你如何用 Webpack 去解决实际项目中常见的场景。

按照不同场景划分成以下几类：

webpack配置

查看所有文档页面： 全栈开发 ，获取更多信息。

原文链接： 第2章 配置 ，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。

配置 Webpack 的方式有两种：

1. 通过一个 JavaScript 文件描述配置，例如使用 webpack.config.js 文件里的配置；
2. 执行 Webpack 可执行文件时通过命令行参数传入，例如 webpack --devtool source-map 。

Webpack附录

查看所有文档页面： 全栈开发 ，获取更多信息。
原文链接： webpack原理 ，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。

常用 Loaders

加载文件

• raw-loader ：把文本文件的内容加载到代码中去，在 3-20加载SVG 中有介绍。
• file-loader ：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件，在 3-19加载图片 、 3-20加载 SVG 、 4-9 CDN 加速 中有介绍。
• url-loader ：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去，在 3-19加载图片 、 3-20加载 SVG 中有介绍。
• source-map-loader ：加载额外的 Source Map 文件，以方便断点调试，在 3-21加载 Source Map 中有介绍。
• svg-inline-loader ：把压缩后的 SVG 内容注入到代码中，在 3-20加载 SVG 中有介绍。
• node-loader ：加载 Node.js 原生模块 .node 文件。
• image-loader ：加载并且压缩图片文件。
• json-loader ：加载 JSON 文件。
• yaml-loader ：加载 YAML 文件。