wepack4的打包模式是什么？

• 默认是production
• development
• none

简单说下Webpack简单工作原理

Webpack 启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。 每找到一个 Module， 就会根据配置的 Loader 去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

webpack支持什么规范？

commonJs和esModules。默认支持的是commonJs（所以commonJs的不需要做什么替换，直接return）

webpack打包结果的运行原理是什么？

webpack打包后的bundle.js是一个立即执行函数，参数是打包后的模块列表。 通过modules下标访问每个模块的内容，加载后动态添加到页面上。

如何配置loader？

• use属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；
• 每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如css-loader?minimize中的minimize告诉css-loader要开启 CSS 压缩。

如何实现less的打包

less-loader

css-loader（将css转成js后，并push到模块列表里）

style-loader（将css的相关js，append到页面里）

如何使用webpack转换es6代码

babel-loader及相关插件

文件资源怎么加载

file-loader（把图片资源拷贝到output指定目录下，然后把文件路径作为当前模块的模块值返回）

url-loader （即转成base64，适用于小文件）

如何在打包文件里自动生成html文件

使用html-webpack-plugin 没有index.html也可，有index.html可进行一些变量配置

如何输出多个html页面

webpack里插件的工作原理是什么？

通过webpack的生命周期钩子挂载函数实现扩展（一个函数或者一个含有apply方法的对象）

webpack如何自动编译更新并刷新浏览器的？如何监视静态文件？

webpack-dev-server。其打包文件并不是放在磁盘中，而是内存中。

当要监视静态文件时，要使用contentBase这个配置，指定监视的静态文件的路径

如何开启热更新？

HMR是集成在webpack-dev-server里的了，所以不需要再安装其它模块。

或者通过webpack配置（该配置需要导入HMR插件），

其原理是：

• Webpack Compile：将js编译成bundle（即最后打包好的文件）
• HMR Server：将热更新文件给到HMR Runtime
• Bundle Server：提供一个服务器，让文件在浏览器中可以以服务器的方式访问
• HMR Runtime：会被注入浏览器，监听文件的变化（一般是通过WebSocket与服务器连接）

流程如下：

热替换失败，页面刷新了看不到报错怎么办

开启hotOnly，热替换错误时不会刷新

为什么css可以显示无刷新浏览器热更新，而js不行？如果js要实现无刷新浏览器热更新要怎么处理？

因为css的规律是可寻的，js的则不行。

使用下面这个api可以实现无刷新。

注：我们使用的vue框架或其它框架，已经内部处理好了各种js热更新的处理，所以不需要什么配置。

图片热更新原理？

与js道理相似。

sourceMap原理？eval模式的sourceMap和一般的sourceMap有什么区别？

在js文件最后写上map地址。

eval的只能定位到文件，不能定位到文件里的代码行和列。

如何注入全局变量？

webpack4提供了DefinePlugin。

比如：

如何开启treeShaking？

生产模式是默认就有的了。（能使用tree-shaking的前提是使用了esModule）

显式打开是：

optimization是webpack里集中配置优化功能的。

如何将多个函数打包在一起？有什么好处？

使用concatenateModules

好处是压缩了代码，提高了运行效率。

babel和treeShaking有冲突吗？

看配置。如果babel配置里是把es模块转成了commonJs了，那treeShaking就无效了（因为能treeShaking的前提是使用了ESM）

代码如何分割？

• 多入口打包
• 提取公共模块

这里是指所有的公共模块到打包到新的一个bundle里

• 动态导入

如下：

路由的按需导入也会让打包后是代码分割好的。

如果想定义按需引入的打包后的文件名，可用魔法注解，代码如下： 如果名字是一样的，则打包到通过文件里了。

如何将css文件单独提出？如何压缩css文件？

不需要style-loader了。所以如果是css文件很大，才考虑用miniCssExtractPlugin

使用另一个插件进行压缩。（这个插件只负责压缩，不包含css提取功能）

要配置在minimizer里，表明是在生产环境使用的而已。

如何压缩js文件？

打包文件名如何添加hash？

• hash（某一文件发生改变，所有文件的hash都发生变化）
• chunkHash（某一文件发生改变，该文件所属的chunk下的所有文件的hash都发生变化）
• contentHash（某一文件发生改变，该文件，以及引用该文件的的hash都发生变化）

所以，contentHash是最精确的。建议使用contentHash

如何优化webpack构建优化

• 缩小文件搜索范围（比如loader的作用范围，别名等）
• DllPlugin
• CDN
• 多线程构建，压缩
• 开启gzip（需要后端配合）

loader 工作原理

暴露了一个有返回值的函数，然后像compose一样（管道的概念），从后往前执行，且最终返回结果是js代码

loader-runner是什么

是一个可用于调试loader，不依赖于webpack的工具

plugin 工作原理

loader 和 plugin 有什么区别

loader用于加载各种各样的静态资源，将浏览器不认识的代码解析为能懂的； plugin是做除了资源加载以外的其它事情，是贯穿webpack整个工作过程的，loader做不了的插件都可以做，比如打包优化和压缩