再学webpack
1 优化 webpack 打包体积的思路
优化 webpack 打包体积的思路包括：
- 提取第三方库或通过引用外部文件的方式引入第三方库：将第三方库单独打包，并通过 CDN 引入，减少打包体积。
- 使用代码压缩插件：例如
UglifyJsPlugin，可以压缩 JavaScript 代码，减小文件体积。 - 启用服务器端的 Gzip 压缩：通过服务器端配置 Gzip 压缩，减少传输体积。
- 按需加载资源文件：使用
require.ensure或动态导入（import()）的方式按需加载资源文件，避免一次性加载所有资源，优化加载速度和体积。 - 优化 devtool 中的 source-map：选择合适的 devtool 配置，确保在开发阶段能够提供足够的错误追踪信息，但不会增加过多的打包体积。
- 剥离 CSS 文件：将 CSS 文件单独打包，通过
标签引入，利用浏览器的并行加载能力。 - 去除不必要的插件：检查 webpack 配置中的插件，移除不必要的插件或根据环境区分开发环境和生产环境的配置，避免将开发环境的调试工具打包到生产环境中。
除了上述优化思路，还可以考虑以下几点：
- 使用 Tree Shaking：通过配置 webpack，将未使用的代码在打包过程中消除，减少打包体积。
- 使用模块化引入：合理使用 ES6 模块化语法或其他模块化方案，按需引入模块，避免不必要的全局引入。
- 按需加载第三方库：对于较大的第三方库，可以考虑按需加载，而不是一次性全部引入。
- 优化图片资源：压缩图片，使用适当的图片格式，尽量减小图片体积。
- 优化字体文件：如果使用了大量的字体文件，可以考虑只引入需要的字体文件，避免全部引入。
- 使用缓存：通过配置合适的缓存策略，利用浏览器缓存机制，减少重复加载资源。
综合以上优化思路，可以有效减小 webpack 打包生成的文件体积，提升应用性能和加载速度。需要根据具体项目情况和需求，选择合适的优化策略和配置。
2 优化 webpack 打包效率的方法
- 使用增量构建和热更新：在开发环境下，使用增量构建和热更新功能，只重新构建修改过的模块，减少整体构建时间。
- 避免无意义的工作：在开发环境中，避免执行无意义的工作，如提取 CSS、计算文件
hash等，以减少构建时间。 - 配置合适的 devtool：选择适当的 devtool 配置，提供足够的调试信息，但不会对构建性能产生太大影响。
- 选择合适的 loader：根据需要加载的资源类型选择高效的 loader，避免不必要的解析和处理过程。
- 启用 loader 缓存：对于耗时较长的 loader，如
babel-loader，可以启用缓存功能，避免重复处理同一文件。 - 采用引入方式引入第三方库：对于第三方库，可以通过直接引入的方式（如 CDN 引入）来减少打包时间。
- 提取公共代码：通过配置 webpack 的 SplitChunks 插件，提取公共代码，避免重复打包相同的代码，提高打包效率。
- 优化构建时的搜索路径：指定需要构建的目录和不需要构建的目录，减少搜索范围，加快构建速度。
- 模块化引入需要的部分：使用按需引入的方式，只引入需要的模块或组件，避免加载不必要的代码，提高构建效率。
通过以上优化措施，可以有效提升 webpack 的打包效率，减少开发和构建时间，提升开发效率和用户体验。根据具体项目需求和场景，选择适合的优化方法进行配置和调整。
3 编写Loader
编写一个名为 reverse-txt-loader 的 Loader，实现对文本内容进行反转处理的功能。
// reverse-txt-loader.js
module.exports = function (source) {
// 对源代码进行处理，这里是将字符串反转
const reversedSource = source.split('').reverse().join('');
// 返回处理后的 JavaScript 代码作为模块输出
return `module.exports = '${reversedSource}';`;
};
上述代码定义了一个函数，该函数接收一个参数 source，即原始的文本内容。在函数内部，我们将源代码进行反转处理，并将处理后的结果拼接成一个字符串，再通过 module.exports 输出为一个 JavaScript 模块。
要使用这个 Loader，需要在 webpack 配置中指定该 Loader 的路径：
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /.txt$/,
use: [
{
loader: './path/reverse-txt-loader'
}
]
}
]
}
// ...
};
上述配置将该 Loader 应用于所有以 .txt 结尾的文件。在构建过程中，当遇到需要加载的 .txt 文件时，会调用 reverse-txt-loader 对文件内容进行反转处理，并将处理后的结果作为模块的输出。
请注意，在实际使用中，需要根据实际路径修改 loader 配置的路径，并将该 Loader 安装在项目中。
4 编写plugin
编写一个自定义的 Webpack 插件需要创建一个 JavaScript 类，并在类中实现指定的生命周期方法。下面是一个简单的示例，展示如何编写一个自定义的 Webpack 插件：
class MyPlugin {
constructor(options) {
// 在构造函数中可以接收插件的配置参数
this.options = options;
}
// Webpack 在安装插件时会自动调用 apply 方法，并将 compiler 对象传递进来
apply(compiler) {
// 在适当的生命周期钩子中挂载插件的功能
// 示例：在 emit 生命周期钩子中添加自定义的功能
compiler.hooks.emit.tap('MyPlugin', (compilation) => {
// compilation 对象包含了当前构建过程的各种信息
// 可以在这里执行一些自定义的操作
// 示例：向输出的文件中添加自定义的注释
const comment = this.options.comment || 'Custom comment';
for (const asset in compilation.assets) {
if (compilation.assets.hasOwnProperty(asset)) {
compilation.assets[asset].source = () => {
return `/* ${comment} */\n` + compilation.assets[asset].source();
};
}
}
});
}
}
以上是一个简单的插件示例，它在构建过程中的 emit 生命周期钩子中向输出的文件添加了自定义的注释。你可以根据实际需求在其他生命周期钩子中实现不同的功能。
要使用该插件，在 webpack 的配置文件中进行如下配置：
const MyPlugin = require('./path/to/MyPlugin');
module.exports = {
// ...
plugins: [
new MyPlugin({
comment: 'Custom comment',
}),
],
};
这样，当你运行 webpack 构建时，该插件就会被应用，并执行指定的功能。
需要注意的是，Webpack 的插件机制非常灵活，可以根据实际需求编写各种各样的插件。插件可以监听多个生命周期钩子，并在每个生命周期钩子中实现自定义的功能。详细的插件开发文档可以参考 Webpack 官方文档。
5 说一下webpack的一些plugin，怎么使用webpack对项目进行优化
Webpack 提供了许多插件（Plugins）来帮助优化项目构建和性能。下面列举一些常用的插件以及它们的作用：
构建优化插件：
ContextReplacementPlugin：用于限制某些模块的上下文，可以减少编译体积。IgnorePlugin：用于忽略特定的模块，减少打包体积。babel-plugin-import：用于按需加载和使用模块，减少打包体积。babel-plugin-transform-runtime：将代码中的公共部分提取到一个单独的模块中，减少打包体积。happypack、thread-loader：实现并行编译，加快构建速度。uglifyjs-webpack-plugin：通过并行压缩和缓存来加快代码压缩的速度。
性能优化插件：
Tree-shaking：通过静态分析代码，去除未使用的代码，减少打包体积。Scope Hoisting：将模块之间的关系进行静态分析，减少打包后的模块数量，提升代码执行速度。webpack-md5-plugin：根据文件内容生成 hash，实现缓存的更新机制。splitChunksPlugin：根据配置将代码拆分成多个块，实现按需加载和并行加载的效果。import()、require.ensure：动态导入模块，实现按需加载，提升页面加载速度。
除了使用这些插件，还可以通过配置 webpack 的其他参数来进一步优化项目，例如：
- 配置
devtool：选择合适的 Source Map 类型，既满足调试需求又不影响构建速度。 - 配置
output：使用chunkhash或contenthash生成文件名，实现长期缓存。 - 使用
cache-loader、hard-source-webpack-plugin、uglifyjs-webpack-plugin等插件开启缓存，加速再次构建。 - 使用
DllWebpackPlugin和DllReferencePlugin预编译公共模块，减少重复构建时间。
综合使用这些插件和优化策略，可以显著提升 webpack 项目的构建效率和性能。但是需要根据具体的项目需求和场景选择合适的插件和优化方法。
6 webpack Plugin 和 Loader 的区别
Loader用于对模块源码进行转换，将非 JavaScript 模块转换为 JavaScript 模块，或对模块进行预处理。它描述了webpack如何处理不同类型的文件，比如将 Sass 文件转换为 CSS 文件，或将ES6代码转换为ES5代码。Loader是针对单个文件的转换操作，通过配置rules来匹配文件并指定相应的LoaderPlugin用于扩展 webpack 的功能，解决Loader无法解决的问题。Plugin可以监听webpack构建过程中的事件，并在特定的时机执行相应的操作。它可以在打包优化、资源管理、环境变量注入等方面提供额外的功能。Plugin 的功能范围更广泛，可以修改webpack的内部行为，从而实现更复杂的构建需求。
总的来说，Loader 是用于处理模块源码的转换工具，而 Plugin 则是用于扩展 webpack 的功能，通过监听 webpack 构建过程中的事件来执行相应的操作。它们各自的作用和功能不同，但都可以用于优化和定制 webpack 的构建过程。在配置 webpack 时，我们可以通过配置 Loader 和 Plugin 来满足不同的需求，并实现对模块的转换和构建过程的定制化
7 tree shaking 的原理是什么
Tree shaking 的原理主要是基于静态分析的方式来实现无用代码的消除，从而减小最终打包生成的文件体积。它的工作原理可以简要概括如下：
- 采用
ES6 Module语法：Tree shaking只对ES6 Module语法进行静态分析和优化。ES6 Module的特点是可以进行静态分析，这意味着在编译阶段就能够确定模块之间的依赖关系。 - 静态分析模块依赖：在编译过程中，通过静态分析可以确定每个模块的依赖关系，以及模块中导出的函数、变量等信息。
- 标记未被引用的代码：在静态分析的过程中，会标记出那些未被其他模块引用的函数、变量和代码块。
- 消除未被引用的代码：在构建过程中，根据静态分析得到的标记信息，可以对未被引用的代码进行消除。这样，在最终生成的打包文件中，未被引用的代码将不会包含在内。
总结来说，Tree shaking 的核心思想是通过静态分析模块依赖关系，并标记和消除未被引用的代码。这样可以大大减小打包后的文件体积，提升应用的性能和加载速度。需要注意的是，Tree shaking 只对 ES6 Module 语法起作用，而对于 CommonJS 等其他模块系统则无法进行静态分析和优化。
8 common.js 和 es6 中模块引入的区别
CommonJS 是一种模块规范，最初被应用于 Nodejs，成为 Nodejs 的模块规范。运行在浏览器端的 JavaScript 由于也缺少类似的规范，在 ES6 出来之前，前端也实现了一套相同的模块规范 (例如:
AMD)，用来对前端模块进行管理。自 ES6 起，引入了一套新的ES6 Module规范，在语言标准的层面上实现了模块功能，而且实现得相当简单，有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对ES6 Module兼容还不太好，我们平时在Webpack中使用的export和import，会经过Babel转换为CommonJS规范
CommonJS 和 ES6 Module 在模块引入的方式和特性上有一些区别，主要包括以下几个方面：
- 输出方式：
CommonJS输出的是一个值的拷贝，而ES6 Module输出的是值的引用。在CommonJS中，模块导出的值是被复制的，即使导出模块后修改了模块内部的值，也不会影响导入模块的值。而在ES6 Module中，模块导出的值是引用关系，如果导出模块后修改了模块内部的值，会影响到导入模块的值 - 加载时机：
CommonJS模块是运行时加载，也就是在代码执行到导入模块的位置时才会加载模块并执行。而ES6 Module是编译时输出接口，也就是在代码编译阶段就会确定模块的依赖关系，并在运行前静态地解析模块的导入和导出 - 导出方式：
CommonJS采用的是module.exports导出，可以导出任意类型的值。ES6 Module采用的是export导出，只能导出具名的变量、函数、类等，而不能直接导出任意值 - 导入方式：
CommonJS使用require()来导入模块，可以使用动态语法，允许在条件语句中使用。ES6 Module使用import来导入模块，它是静态语法，只能写在模块的顶层，不能写在条件语句中 - this 指向：
CommonJS模块中的this指向当前模块的exports对象，而不是全局对象。ES6 Module中的this默认是undefined，在模块中直接使用this会报错
总的来说，
CommonJS主要用于服务器端的模块化开发，运行时加载，更适合动态加载模块，而ES6 Module是在语言层面上实现的模块化方案，静态编译，更适合在构建时进行模块依赖的静态分析和优化。在前端开发中，通常使用打包工具（如webpack）将ES6 Module转换为CommonJS或其他模块规范，以实现在浏览器环境中的兼容性。
9 babel原理
Babel 是一个 JavaScript 编译器。他把最新版的 javascript 编译成当下可以执行的版本，简言之，利用 babel 就可以让我们在当前的项目中随意的使用这些新最新的 es6，甚至 es7 的语法
ES6、7代码输入 ->babylon进行解析 -> 得到AST（抽象语法树）->plugin用babel-traverse对AST树进行遍历转译 ->得到新的AST树->用babel-generator通过AST树生成ES5代码
它的工作流程包括解析（parse）、转换（transform）和生成（generate）三个主要步骤
- 解析（parse） ：Babel 使用解析器（如
Babylon）将输入的 JavaScript 代码解析成抽象语法树（AST）。解析器将代码分析成语法结构，并生成对应的 AST，表示代码的抽象语法结构。这个阶段包括词法分析和语法分析。词法分析将源代码转换为一个个标记（tokens）的流，而语法分析则将这个标记流转换为 AST 的形式。 - 转换（transform） ：在转换阶段，Babel 使用插件（plugins）对 AST 进行遍历和转换。插件可以对 AST 进行增删改查的操作，可以根据需求对语法进行转换、代码优化等。Babel 的插件系统非常灵活，可以根据需要自定义插件或使用现有插件来进行代码转换。
- 生成（generate） ：在生成阶段，Babel 使用生成器（如
babel-generator）将经过转换的 AST 转换回字符串形式的 JavaScript 代码。生成器会深度优先遍历 AST，并根据 AST 的节点类型生成对应的代码字符串，最终将代码字符串输出。
通过以上三个步骤，Babel 实现了将最新版本的 JavaScript 代码转换为向后兼容的代码，使得开发者可以在当前环境中使用较新的 JavaScript 特性和语法。同时，Babel 还提供了一些常用的插件和预设（presets），以便开发者快速配置和使用常见的转换规则，如转换 ES6、ES7 语法、处理模块化、转换 JSX 等。
总的来说，Babel 的原理是通过解析、转换和生成的过程，将新版本的 JavaScript 代码转换为兼容旧环境的代码，使开发者能够在当前环境中使用较新的 JavaScript 特性和语法。