webpack学习记录

前言

以前的时候就使用过webpack，但都只是会使用基本的配置，优化方面的都没有去了解一下，趁过年有休闲时间。对webpack常用的东西进行一次总结、分析。毕竟webpack这东西写完又忘记，忘记又去学，不如自己写一篇文章记录下来。这里只是记录一下学习思路，以及学习的总结，并不会做深入详细的说明。

webpack的五个核心配置

• mode
  编译环境，不同的环境webpack会提供不同机制

• entry
  文件核心入口，可设置单入口和多入口

• output
  webpage编译输出时的路径，

• module
  webpack需要解析其他文件时，需要借用loader来处理非js文件。直接在module配置各个loader。

• plugin
  webpack插件，值为一个数组，每一项是插件构造函数的实例。

优化点

在开发中可以通过两个点来优化，一个开发环境和生产环境。

• 开发环境

  1. 构建速度

     1. HMR （热模块替换）

        默认style-loader会自带HMR，修改css文件会热替换，js就需要自己去配置，不然就一个js文件修改全部替换，可以通过module.hot暴露出来。设置单独的js文件热替换。

  2. 代码调试

     1. source-map

        这里使用 eval-source-map & inline-source-map，这两种方式会使速度快、调试更友好，缺点是打包体积更大、展示源码。

• 生产环境

  1. tree shaking

     两个条件： 使用es6的模块化和生产环境下，符合以上两个条件webpack就会把没有用上的代码去除掉。

     webpack4新增了一个sideEffects新特性，它允许我们在package.json通过配置的方式，去标识我们的代码是否有副作用，从而为Tree-shaking提供更大的压缩空间。这个特性会把css和babel给忽略掉。通过标识指定文件有副作用即可
     “sideEffects”: [ “*.css” ]

  2. code split

     代码文件进行切割成多个子文件。webpack默认会把css等资源全部打包到一个js文件中。项目大的时候加载缓慢，通过分块打包加载。

     webpack.config.js配置 optimizations.splitChunks.chunks = “all”，会对第三方资源独立一个chunk，如果需要独立自己的js文件，需要import这个方法加载模块。

  3. lazy loading & prefetch

     有时候项目复杂，里面要加载的文件很大的时候，一次性加载难免会有点卡顿，通过懒加载去把一些没有用到的js文件用到时再去加载，可以降解首次加载文件压力。通过import（path）加载文件，返回一个promise异步读取文件。还可以注释的形式设置预加载（webpackPrefech：true）预加载的写法import（/* webpackPrefech：true */path）

  4. externals

     有时候项目需要通过cdn的引用方式，来引入第三方库，而不需要跟项目打包某个第三方库时，使用这个属性来指定不需要打包的第三方库资源。

  5. 缓存

     项目上线以后，更新bug时需要重新上传服务器资源。如果不设置缓存的话直接全部项目重新上传有些没有更新的文件就会重复上传，上传资源缓慢。通过设置缓存的形式，来提高发布版本时的快捷。

     缓存有两种：

     1. babel缓存

        这个缓存直接在loader上配置属性catchDirectory:true即可。

     2. 其他资源的缓存

        通过contenthash来命名文件名，通过文件内容改变成的hash值。

  6. 代码调试

     1. source-map

        生产环境注重性能、体积、安全性，所以开发环境的那两种不适合。这里使用以下两种

        1. hidden-source-map （全部隐藏)）
        2. nosources–source-map(只隐藏源代码,提示构建后代码错误信息)

对资源的压缩

• html

  使用 一个插件html-webpack-plugin，更多配置看官网

• css

  使用optimize-css-assets-webpack-plugin对css压缩进行配置，更多配置看官网

• js

  webpack4.0生产环境中默认会对js压缩，可以通过terser-webpack-plugin这个对js修改默认的配置，更多配置看官网

loader和plugin的区别

默认webpack只能解析js文件，其他非js文件解析不了，需要通过loader来解析非js文件的功能。

plugin（插件）在webpack编译期间会执行很多生命周期，通过捕获生命周期抛出的事件，来获取webpack提供的api来对文件的输出进行修改。

总结

多想，多记，多实践