接着奏乐接着舞的博客

Vue 的动态 import 和 React 的 React.lazy 是框架层面的特性，用于标记哪些代码应该被懒加载。Webpack（或其他构建工具）的作用是在构建过程中识别这些动态导入，并据此将应用程序拆分成多个较小的包。这个过程称为“代码分割”。

首先监听webpack打包后的时机，而这个钩子函数是done.正常打包时将500.jsx文件打包到dist下的500文件夹下名称为index.html。于是，我先使用copySync方法复制一份index.html，复制后的文件叫50x.html，此时目录下有两个文件，我们再使用unlink删除index.html就完事了。比如：我想将下图中的src目录下的500.jsx文件打包后输出到dist目录下500文件夹下名为50x.html.ps:我使用了setTimeout异步是因为copySync是异步的。

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。更多的功能需要借助webpack loaders和webpack plugins完成。webpack loader： loader本质上是一个函数，它的作用是将某个源码字符串转换成另一个源码字符串返回。loader函数的将在模块解析的过程中被调用，以得到最终的源码。

目录前言： 1.webpack 的构建流程是什么?2.说一下 webpack 的热更新原理(必会)3.有哪些常见的 Loader？他们是解决什么问题的？4.Loader 和 Plugin 的不同？5.分别介绍一下 bundle，chunk，module 的作用是什么（6.如何利用 webpack 来优化前端性能7.是否写过 Loader 和 Plugin？思路？8.使用 webpack 开发时，你用过哪些可以提高效率的插件？9.请详细说明一下 Babel 编译的原理是什么？ 10.在生产环境

高级篇主要讲述：1.提升开发体验2.提升 webpack 提升打包构建速度3.减少代码体积4.优化代码运行性能这部分的知识很重要，是前端性能优化的重要组成部分，也是面试的高频考点。注：webpack几乎所有的配置流程都一样，既：去官网（中文翻译网站经常有错误！）先下载包，然后去config里面配置就完事，本文对此稍作演示，其他请自行查阅配置。

目录前言：1.核心概念介绍2.处理Css资源3.处理图片资源4.修改输出资源的名称和路径5.自动清空上次打包资源6.处理字体图标资源7.处理其他资源8.处理js资源9.处理HTML资源10.开发服务器&自动化前言：这篇文章目的是学习如何使用webpack，至于其他的不做过多废话。Webpack是一个静态资源打包工具。可以将一些文件（如es6语法、sass、less）编译成浏览器认识的代码，从而运行.1.核心概念介绍1...