webpack面试问题

loader与plugin区别

Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less…），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

样式

3-4 使用 SCSS · 深入浅出 Webpack


PostCSS 是一个 CSS 处理工具，和 SCSS 不同的地方在于它通过插件机制可以灵活的扩展其支持的特性，而不是像 SCSS 那样语法是固定的。 PostCSS 的用处非常多，包括给 CSS 自动加前缀、使用下一代 CSS 语法等，目前越来越多的人开始用它，它很可能会成为 CSS 预处理器的最终赢家。

dll动态链接库

这个是面试过程中的优化点
把不变的第三方库，独立打包，开发的时候直接引用打包好的，提高开发效率

new webpack.DllReferenceP;ugin({
	manifest: path.resolve(__dirname, 'dist', 'manifest.json')
})

上面代码的含义是，当页面中出现引用第三方库，先去manifest.json看是否已经打包至dll，如果是，就不需要在打包了，直接引用即可
这样的目的是减少再次打包的体积，也是一种优化方案

output: {
            publicPath,
            filename: 'assets/js/[name].js'，
				library: '[name]', //导出去的文件名字ab
				libraryTarget: 'var' ,//UMD,amd, commonjs
        },

Manifest.json是任务清单，清单里面的任务从name中找同名变量，就是上面library中的名字的文件

代码切割

静态代码分割是指：在代码中明确声明需要异步加载的代码。
在 Vue 中，可以直接使用 import() 关键字做到这一点
动态代码分割是指：在代码调用时根据当前的状态，「动态地」异步加载对应的代码块。

const getTheme = (themeName) => import(`./src/themes/${themeName}`)
// using `import()` 'dynamically'
if (window.feeling.stylish) {
  getTheme('stylish').then((module) => {
    module.applyTheme()
  })
} else if (window.feeling.trendy) {
  getTheme('trendy').then((module) => {
    module.applyTheme()
  })
}

魔术注释
魔术注释是由 Webpack 提供的，可以为代码分割服务的一种技术。通过在 import 关键字后的括号中使用指定注释，我们可以对代码分割后的 chunk 有更多的控制权，让我们看一个例子：

// index.js
import (
  /* webpackChunkName: “my-chunk-name” */
  './footer'
)

分隔好处之一是：可以增加304缓存

source-map

这个也是项目里面一个很好的优化点
https://juejin.im/post/58293502a0bb9f005767ba2f
前端性能与异常上报 - 掘金
主要用于源码调试，定位错误的

devtool: 'source-map'

1、source-map
源码映射，会单独生成一个source-map文件，出错了会标识当前报错的行和列，大而全

2、eval-source-map
集成在打包后的文件中，不会产生单独的文件，但是可以显示行和列
3、cheap-module-source-map
不会产生列，但是是一个单独的映射文件，产生后保存起来，调试
4、cheap-module—eval-source-map
不会产生文件，集成在打包后的文件中，不会产生列

开发环境推荐：
cheap-module-eval-source-map
生产环境推荐：
cheap-module-source-map （这也是下版本 webpack 使用-d命令启动 debug 模式时的默认选项）
原因如下：
1. *使用 cheap 模式可以大幅提高 souremap 生成的效率。*大部分情况我们调试并不关心列信息，而且就算 sourcemap 没有列，有些浏览器引擎（例如 v8） 也会给出列信息。
2. *使用 eval 方式可大幅提高持续构建效率。*参考官方文档提供的速度对比表格可以看到 eval 模式的编译速度很快。
3. 使用 module 可支持 babel 这种预编译工具（在 webpack 里做为 loader 使用）。
4. *使用 eval-source-map 模式可以减少网络请求。*这种模式开启 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那样，浏览器需要发送一个完整请求去获取 sourcemap 文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得极大。

webpack中涉及到的优化

Webpack优化总会让你不得不爱 - 掘金
1、去除无用的css样式purgecss-webpack-plugin
2、Tree-shaking删除无用代码
3、使用动态链接库，提高打包速度
4、懒加载（import）
5、抽取公共代码（好处：一：不会和业务逻辑打包在一起，二：、增加缓存 304）
6、热更新
7、前后端分离
8、IgnorePlugin作用： 忽略打包第三方模块指定的目录，例如moment的语言包
9、noParse的作用是不去解析你所使用的第三方库中的依赖库
10、include、exclude

• • include: 包含指定目录下的文件解析
• exclude: 排除指定目录不进行解析
  11、happypack：多线程打包

概念区分

webpack 中那些最易混淆的 5 个知识点 - 掘金

tree-shaking

1、原理：
ES6的模块引入是静态分析的，故而可以在编译时正确判断到底加载了什么代码。
分析程序流，判断哪些变量未被使用、引用，进而删除此代码。
2、作用：
删除没用到的代码。这样的功能对于构建大型应用时是非常好的，因为日常开发经常需要引用各种库。但大多时候仅仅使用了这些库的某些部分，并非需要全部，此时Tree-Shaking如果能帮助我们删除掉没有使用的代码，将会大大缩减打包后的代码量。

目前就先这么多，之后在整理整理吧