前端面试总结--webpack

参考：关于webpack的面试题

webpack是什么

webpack是一个现代的JavaScript应用的静态模块打包工具。

webpack安装

# 全局安装
npm install webpack -g

# 局部安装
npm install babel-loader --save-dev # 开发时依赖
npm install babel-loader --save # 运行时依赖

webpack使用

package.json的scripts中定义自己的执行脚本
然后执行 npm run build（会先在node_modules/.bin路径下寻找命令，没找到会去全局的环境变量去找）

入口和出口

常用的loader

loader：转换某些类型的模块

---

• image-loader：加载并且压缩图片文件
• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理超过8K的图片和字体)
• url-loader：和 file-loader 类似，但是能在文件大小小于阈值（阈值可设置）的情况下以 base64 的方式把文件内容注入到代码中去
• svg-sprite-loader：将加载的 svg 图片拼接成雪碧图

---

• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS

---

• vue-loader：解析和转换.vue文件
• babel-loader：把 ES6 转换成 ES5
• ts-loader: 将 TypeScript 转换成 JavaScript
• awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader
• less-loader：将less转换成css
• sass-loader：将SCSS/SASS转换成CSS

---

• eslint-loader：通过 ESLint 检查 JavaScript 代码
• tslint-loader：通过 TSLint检查 TypeScript 代码
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试

---

安装：npm install --save-dev less-loader less
使用：

module: {
	rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: resolve('src/icons'),
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
	]
}

常用的plugin

plugin：对webpack现有功能的各种扩展，比如打包优化，文件压缩等

---

• html-webpack-plugin：自动生成一个index.html文件，将打包的js文件，自动通过script标签插入到body中
• web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用
• copy-webpack-plugin：将单个文件或整个目录复制到构建目录
• uglifyjs-webpack-plugin：压缩js
• webpack-parallel-uglify-plugin: 多进程执行代码压缩，提升构建速度
• mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin)
• serviceworker-webpack-plugin：为网页应用增加离线缓存功能
• clean-webpack-plugin: 目录清理
• speed-measure-webpack-plugin: 可以看到每个 Loader 和 Plugin 执行耗时 (整个打包耗时、每个 Plugin 和 Loader 耗时)
• webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)
• define-plugin：定义环境变量 (Webpack4 之后指定 mode 会自动配置)
• ignore-plugin：忽略部分文件
• commons-chunk-plugin：提取公共代码

---

安装：npm install html-webpack-plugin --save-dev
使用：

  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // 将单个文件或整个目录复制到构建目录
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]

loader和plugin的区别

作用不同：

• loader主要用于转换某些类型的模块，它是一个转换器
• plugin是插件，它是对webpack本身的扩展，是一个扩展器

---

使用方法不同：

• loader在module.rules中配置，也就是说他作为模块的解析规则而存在。类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
• plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。

webpack构造流程

webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

---

• 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
• 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
• 确定入口：根据配置中的 entry 找出所有的入口文件
• 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
• 完成模块编译：得到每个模块被翻译后的最终内容以及它们之间的依赖关系
• 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
• 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

---

在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 webpack 提供的 API 改变 webpack 的运行结果。

编写loader或plugin的思路

Loader像一个"翻译官"把读到的源文件内容转义成新的文件内容，并且每个Loader通过链式操作，将源文件一步步翻译成想要的样子。
编写Loader时要遵循单一原则，每个Loader只做一种"转义"工作。 每个Loader的拿到的是源文件内容（source），可以通过返回值的方式将处理后的内容输出，也可以调用this.callback()方法，将内容返回给webpack。 还可以通过 this.async()生成一个callback函数，再用这个callback将处理后的内容输出出去。 此外webpack还为开发者准备了开发loader的工具函数集——loader-utils。
相对于Loader而言，Plugin的编写就灵活了许多。 webpack在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

热更新原理

webpack的热更新又称热替换（Hot Module Replacement），缩写为HMR。这个机制可以做到不用刷新浏览器就可以将最新的变化更新出来
服务器和浏览器之前维护了一个websocket，当本地资源发生变化时，服务器会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向服务器发起 Ajax请求来获取更改内容。

如何利用webpack来优化前端性能

• 压缩代码：
  删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
• 利用CDN：
  构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
• 删除死代码（Tree Shaking）：
  将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数–optimize-minimize来实现
• 使用CommonsChunkPlugin来提取公共代码

如何提高webpack的构建速度

• 多入口情况下，使用CommonsChunkPlugin来提取公共代码
• 通过externals配置来提取常用库
• 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来
• 使用Happypack 实现多线程加速编译
• 使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
• 使用Tree-shaking和Scope Hoisting来剔除多余代码

常用的devServer属性

devServer是用来配置开发环境服务器的
安装：npm install --save-dev [email protected]
package.json配置："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
运行：npm run dev

---

配置：

devServer:{
	contentBase：'./dist', //为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
	host: '', //设置服务器的主机号，默认是localhost
	port：'8888', //端口号
	https: true, //使用http协议
	inline：true, //页面实时刷新
	hot: true, //热更新
	historyApiFallback：true, //如果找不到界面(404)就返回默认首页
	compress: true, //对服务器资源采用gzip压缩
	overlay: true, //在浏览器输出编译错误
	open: true, // dev server将直接打开浏览器
	proxy: {
		'/view': {
			target: 'http://localhost:3000', //目标URL
			pathRewrite: { '^/view': '/sss' }, //重写url,重写之后url为 http://192.168.1.16:8085/sss/xxxx
			changeOrigin: true, //将主机头的起始位置更改为目标URL
			cookieDomainRewrite: 'new.domain', //重写cookie的domain的值
		},
	}
}