Webpack 学习笔记

本文主要参考学习了文章：zhuanlan.zhihu.com/p/44438844 和 juejin.cn/post/684490…

简述

webpack是前端构建工具，会递归解析入口所需要加载的资源文件，用不同的loader处理文件，用plugin来扩展webpack的功能，输出一个或多个bundle。
webpack的本质：JS静态打包工具，当处理应用时，会在内部构建一个依赖图 dependency graph，这个依赖图会映射项目所需的模块，然后生成bundle。
原生webpack只解析 JavaScript 和 JSON 格式，其他格式需要使用 loader 解析，如 css-loader, sass-loader, style-loader, url-loader 等。

wepack的核心

1. entry 入口： 指示 webpack 使用哪个模块；
2. output 输出： 指示 webpack 向哪里输出 bundle；
3. loader 加载器：把 JS/JSON 以外的文件转译成有效模块；
4. plugin 插件：打包优化、资源管理等

配置文件

可在 webpack.config.js 中配置，需要下载 webpack-dev-server

module.exports = {
  entry: path.resolve(...)
  output: {
    path: path.resolve(...)
    filename: ...
  }
  devServer: {...}
  module: {
    rules: [
      {test: /\.css$/, use: ['css-loader', 'style-loader'...]}
      {test: /\.scss/, use: [...]}
      ...
    ]
  }
  plugins: [
    new HTMLWebpackPlugin({...})
    new Webpack.HotModuleReplacementPlugin
  ]
}

loader 和 plugin

区别

• loader是"加载器"，webpack把文件视为模块，原生webpack只解析js文件，其他文件类型的解析需要使用loader，所以loader的作用是让webpack拥有加载解析非js文件的能力。
• plugin是"插件"，用于扩展webpack的功能，让webpack更灵活。webpack在运行的时候会广播很多事件，plugin可以监听这些事件，或者在目标时间通过webpack提供的api改变输出结果。

常见 loader 和 plugin

• image-loader 加载压缩图片文件
• babel-loader 把es6转换成es5
• css-loader 加载css，支持模块化、压缩和文件导入
• style-loader 把css代码注入到js中，通过DOM操作去加载CSS
• commons-chunk-plugin 提取公共代码
• uglifyjs-webpack-plugin 通过uglifyes压缩es6代码

Vue 如何按需加载代码

Vue里的按需加载，很多组件库已经提供了现成的解决方案了。如 Element 出品的 babel-plugin-component 和 AntDesign 出品的 babel-plugin-import 安装插件后，在 .babelrc 配置，或 babel-loader 参数里配置，具体的lib名称+想要的style lib名称，即可实现组件按需加载

如何提高构建速度

• 在多入口情况下，使用 commons-chunk-plugin 来提取公共代码
• 使用 uglifyjs-webpack-plugin 压缩ES6代码
• 使用 webpack-gulify-parallel提升 uglifyPlugin 的压缩速度
• 通过 externals 配置提取常用库
• 使用 tree-shaking 和 scope hoisting 剔除多余的代码

转译的文件过大怎么办

• 提取公共代码 commons-chunk-plugin
• 压缩代码，删除多余的代码(uglifyjs-webpack-plugin, ParallelUglifyPlugin, cssnano etc.)
• 用 CDN 而非静态资源路径
• 删除死代码(tree-shaking)，将代码中永远不会走到的片段删除。可以通过在启动 webpack 时追加参数 --optimize-minimize 来实现