【三分钟】获取webpack重点内容

1.什么是webpack？

Webpack是一个现代javascript应用程序的静态模块打包器。开发的时候我们要使用框架（vue、React），ES6模块化语法，但是浏览器无法直接识别，所以我们需要用webpack将这些语法解析成js、css等语法，可以让浏览器进行识别编译。

优点：可以将代码进行压缩、做兼容性处理、提升代码的性能。

2.webpack的基本构建流程？

描述 webpack 的构建流程 ?_webpack一次编译产生几个compliation-CSDN博客

webpack是一个打包模块化的javascript的工具，它将一切文件都看成模块，通过loader编译转换文件，通过plugin注入钩子，最后将输出的资源模块组合成文件。

3.五个核心概念？

entry（入口）：指示webpack从哪个文件开始打包

output（输出）：指示webpack打包完的文件输出到哪里，如何命名

loader（加载器）：webpack本身只能处理js、json的资源，其他资源要借助loader, webpack才能解析

plugin（插件）：扩展webpack的功能

mode（模式）：开发模式development、生产模式production

4.常用的loader有哪些？loader的作用是什么？

style-loader：在 DOM 里插入一个 <style> 标签，并且将 CSS 写入这个标签内。

css-loader ： 负责将css文件编译成webpack能识别的模块

less-loader：将less编译成css文件

url-loader ：打包图片资源，借助于file-loader

file-loader：可以打包其他资源（字体图标等）

sass/scss-loader：可以将sass/scss文件编译成css文件

postcss-laoder：css兼容性处理

babel-loader：用来处理ES6语法，将其编译为浏览器可以执行的js语法。

eslint-loader：通过 ESLint 检查 JavaScript 代码。

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包处理。

5.常用的plugin有哪些？plugin的作用是什么？

html-webpack-plugin ：创建一个空的html并自动引入所有webpack打包输出的资源；

css-minimizer-webpack-plugin：css压缩

mini-css-extract-plugin：将js中的css模块提取成单独的一个文件

ImageMinimizerWebpackPlugin：压缩图片

clean-webpack-plugin：删除打包文件

EslintWebpackPlugin：js语法检查

Webpack中的插件是用来扩展Webpack功能的函数，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力，它们在Webpack构建过程中被执行。Webpack所有的插件都需要在webpack.config.js的plugins节点中配置。

6.怎样压缩html和js

在生产模式下可以自动进行压缩

7.devserver是什么？(搭建开发服务器)

开发服务器: 不会输出资源，在内存中编译打包的.只存在于开发模式下，生产模式下不存在

自动化：每次写完代码都得重新编译，太麻烦了

下载包:npm i webpack-dev-server -D

// 开发服务器 
devServer: {
            host: "localhost", //启动服务器域名 
            port: "3000", //启动服务器端口号
            open: true, //是否自动打开浏览器
 },

打包 npx webpack server

8.npx和npm的区别？

npx和npm是两个node.js包管理工具中的 命令行工具。

总的来说，npm用于管理和安装依赖包，npx用于运行本地或在线安装的包中的命令。

1. npm是node.js的包管理器，用于安装和管理javascript模块，以及运行项目中的版本。

npx是更高版本中包含的一个命令的工具，用于执行本地安装的或者在线安装的node.js包中的命令。

1. npm安装的包需要在本地全局或项目以来中进行安装，才能在命令行中直接使用。

npx可以在不需要全局安装的情况下直接运行某个包中的指令。

1. npx首先会检查本地是否存在指定的包，如果存在则运行，如果不存在则先下载该包，再执行其中的命令。

npx，不需要提前安装一个包就能立即运行它的命令。

9.HMR

HotModuleReplacement（热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。

修改哪个模块的值，只有修改的模块进行重新加载。

但是当js发生改变时，需要整个页面重新加载。这个代码可以让js改变时，整个页面不需要重新进行加载。

if(module.hot){
 // 判断是否支持热模块的替换功能
 module.hot.accept("./js/count.js"); 
} 
//当count发生变化时，只加载count.js 但是需要把文件名添加在这个代码中

如果有很多js文件，写起来会很麻烦，在实际开发中我们会使用其他loader来解决

比如：vue-loader、react-hot-loader

在css和js中怎样开启？在css中能够自动开启，在js中需要加以判断if语句。

10.oneof

打包时每个文件都会经过所有loader的处理，因为test正则实际没有处理上，但是都要过一遍，所以比较慢。

oneof顾名思义就是只要 匹配上一个loader，剩下的就不匹配了

11.sourceMap

SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。

我们可以通过映射找到代码出错的位置

开发模式使用cheap-module-source-map因为开发模式没有代码压缩 只显示一行也知道是哪一行，打包速度更快

生产模式使用source-map，生产模式有代码压缩如果只有一行的话能具体判断，如果要具体到行 , 打包速度慢

12.include\Exclude

开发时我们需要使用第三方的库或者插件，所有文件都下载到node_modules中了。而这些文件是不需要编译可以直接使用的。所以我们在处理js文件时，要排除node_modules下面的文件。

• Include 包含，只处理xxx文件

• Exclude 排除，除了xxx文件以外其他文件都处理

13.Cache缓存

每次打包时js文件都要经过Eslint检查和Babel编译，速度比较慢，我们可以缓存之前的Eslint检查和Babel编译结果，这样第二次打包时速度就会更快了。

14.多进程打包Thread

想要继续提升打包速度，就是提升js的打包速度，因为其他文件都比较少。而对js文件处理主要就是eslint、babel、Teread三个工具，所以我们要提升它们的运行速度。 理js文件，这样速度就比我们之前的单进程打包更快了。

多进程打包:开启电脑的多个进程同时干一件事，速度更快

15.减少代码体积的方法？

（1）如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们只用上极小部分的功能，这样将整个库都打包进来，体积就太大了。

Tree Shaking是一个术语，通常用于描述移除javascript中的没有使用上的代码。

（2）babel：可以将这些辅助代码作为一个独立的模块，来避免重复引入。

（3）我们可以对图片进行压缩，减少图片的体积。

注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。

16.优化代码运行性能的方法？

Code spilt

需要将打包生成的文件进行代码分隔，生成多个js文件，渲染哪个页面就只加载某个js文件，这样加载的资源就少，速度就更快。

代码的分隔只要做了两件事情

（1）分隔文件：将打包生成的文件进行分隔，生成多个js文件

（2）按需加载：需要哪个文件就加载哪个文件

preload和prefetch

我们在前面已经做了代码分隔，同时使用import动态导入语法来进行代码按需加载（我们也叫懒加载，比如路由懒加载就是这样实现的）

但是加载速度还不够好，比如：是用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿的效果

• preload：告诉浏览器立即加载资源

• prefetch：告诉浏览器在空闲时才开始加载资源

它们的共同点：都只会加载资源，并不执行，都有缓存

它们的区别

• preload加载优先级高，prefetch加载优先级低

• preload只能加载当前页面需要使用的资源，prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源。

总结

前页面优先级高的资源用preload加载

继续扩展 还有很多

17.loader

1. 分类

• pre：前置loader

• normal：普通loader

• inline：内联loader

• post：后置loader

1. 执行顺序

• 4类loader的执行优先级为：pre>normal>inline>post

• 相同优先级的loader执行顺序为：从右到左，从下到上

18.钩子hooks

webpack编译过程中有很多事件，我们把这些事件封装成接口暴露出来，这些接口就叫做钩子。

需要的友友们自取哦！点个小心心再走吧❤

欢迎各位感兴趣的友友一起学习交流！