webpack 技术总结

Tony123
351 阅读3分钟

1. webpack与grunt、gulp的不同?

grunt和gulp是基于流任务，找到一个或者一类文件进行链式操作，更新流上的数据，整条链式操作就构成了一个任务 webpack 是基于模块，webpack会自动递归解析入口文件所需要加载的所有资源文件，然后使用不同的loader处理不同的文件，用plugin来扩展webpack 功能

2. 有哪些常见的Loader？他们是解决什么问题的？

1）babel-loader ES6转换为ES5 2）style-loader 把CSS代码注入到js中，通过DOM操作去加载CSS 3）css-loader 加载CSS，支持模块化，压缩 4）file-loader 把文件输出到一个文件夹中，在代码中通过相对URLURL去引用输出的文件 5）url-loader 与file-loader类似 但是可以使用base64 6）less-loader less文件转换 7）scss-loader scss文件转换 8）ts-loader 9) eslint-loader 10) json-loader 11) postcss-loader 12) cache-loader

3.有哪些常见的Plugin？他们是解决什么问题的？

1.HtmlWebpackPlugin 1）为html文件中引入外部资源 2）可以生成创建html入口文件 2.AddAssetHtmlWebpackPlugin 将静态资源文件注入到html中 3.MiniCssExtractPlugin 将css 从js文件中抽离出来 4.OptimizeCssAssetsWebpackPlugin 压缩CSS 5.CopyWebpackPlugin 复制插件 6.ManifestPlugin 生成manifest.json文件 7.ProgressBarPlugin 进度条 8.HappyPack 开启多进程 9.WebpackBuildNotifierPlugin 通知消息 10.DashboardPlugin 展示面板插件 11.DllPlugin 抽离第三方文件为.dll文件，下次打包是直接可以使用（限开发环境） 12.SpeedMeasureWebpackPlugin 分析打包过程中plugin,loader的执行时长 13.webpack-bundle-analyzer 14.uglifyjs-webpack-plugin 不支持es6压缩 15.terser-webpack-plugin 支持es6压缩 16.purgecss-webpack-plugin 删除无用的css

4.webpack的构建流程是什么?

  1. 初始化参数，从配置文件和Shell语句中读取和合并参数
  2. 开始编译，用上一步得到的参数，初始化Compiler对象，加载所有的插件，执行对象的run方法开始执行编译
  3. 确定入口，根据entry 找到所有的入口文件
  4. 编译模块，调用所有配置的loader进行模块编译（递归调用）
  5. 完成模块编译
  6. 输出资源，根据入口和模块之间的关系，组装成一个或者多个模块 chunk，再把每个单独的文件加入到输出列表
  7. 输出完成

初始化参数==》开始编译(初始化Compiler对象) ==》确定入口 ==》编译模块 ==》完成编译模块 ==》输出资源 ==》输出完成

5. 如何优化 Webpack 的构建速度？

  1. 使用高版本的webpack node.JS
  2. 开启多进程 比如使用thread-loader
  3. 压缩代码
    • 多进程并行压缩
      • webpack-paralle-uglify-plugin
      • uglifyjs-webpack-plugin 设置parallel为true,
      • terser-webpack-plugin 设置 parallel 为true
    • 通过mini-css-extract-plugin 提取Chunk中的CSS 到单独的文件
  4. 缩小打包的作用域
    • 合理使用exclude/include
    • resolve.modules 指明第三方模块的绝对路径
    • 合适使用resolve.extensions 减少后缀
    • noParse 对完全不需要解析的库进行忽略
    • 合理使用alias
  5. 提取页面的公共资源 SplitChunksPlugin
  6. DLL 使用DllPlugin进行分包，使用DllReferencePlugin对manifest.json 引用，让一些基本不会改动的代码打包成静态资源，避免重复编译
  7. 重复利用缓存提升构建速度
    • babel-loader 开启缓存
    • terser-webpack-plugin 开启缓存
    • 使用cache-loader 开启缓存
  8. Tree-shaking
  9. 动态Polyfill

6. 如何提升webpack的用户体验

  1. ProgressBarPlugin 开启进度条
  2. DashboardPlugin 开发面板更加清晰
  3. SpeedMeasurePlugin 开启监控面板
  4. WebpackBuildNotifier 开启通知面板
avatar
文章
阅读
粉丝