学习webpack4的总结笔记

webpack4

webpack 核心概念

• Entry: 入口：Webpack 执行架构的第一步将从 Entry 开始，可以抽象成输入(入口)。
• Module: 模块：在 Webpack 里一切都是模块，一个模块对应着一个文件，Webpack 会从配置的 Entry 开始递归找出所有的依赖模块。
• Chunk: 代码块：一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader: 模块转换器：用于把模块原内容按照需求转化成新内容。
• Plugins: 扩展插件：在 Webpack 构建流程中的特定时机注入扩展逻辑来改变架构结果或做你需要做的事情。
• Output: 输出结果：在 webpack 经过一系列处理并得出最终想要的代码后的输出结果。

其他常用的一些参数

• mode: 环境 环境有三种 development production none
• devtool: 工具 有none source-map module-source-map cheap-source-map…
• context: 上下文，指名webpack的上下文路径
• watch: 监听 boolean，是否监听文件变化重新打包
• watchOptions: 监听时的选项，当watch为true的时候开启
• optimization: 优化, webpack进行优化的选项
• devServer: 开发服务器, 使用webpack-dev-server提供的开发服务器
• resolve: 规则，定制一些查找文件的规则
• resolveLoader loader加载器的选项,这个选项来指定如何查找loader

1.压缩 css js

• yarn add terser-webpack-plugin optimize-css-assets-webpack-plugin -D

terser-webpack-plugin 替换掉 uglifyjs-webpack-plugin，解决 uglifyjs 不支持 es6 语法问题

2.文件位置存放 css 哪些等的存放的目录，不是都在一个文件夹上

(范围从整个项目有东西变化就变 -> 部分项目(chunk) -> 单个文件内容)

• • 正常项目输出文件直接用 hash css 的就用 contenthash
• hash 代表本次的编译,每当编译一次，hash 会变一次，所有的产出资源的 hash 都一样
• chunkhash 代码块的 hash，因为一般来说，每个 entry 都会产生不一样的 chunk(文件名和后缀)
• contenthash 内容 hash，只有当内容变化的时候才变化

3.在 html 中引入图片

• html-withimg-loader

4. 处理 css3 属性前缀(等，加上浏览器适配) 和.browserslistrc , postcss.config.js

• yarn add postcss-loader autoprefixer -D

5.转义代码 jsx es6 es7

• yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react -D

装饰器，类进行转化的插件

• yarn add @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D

6.类，方法，等代码重复创建问题

对一些公共辅助代码，可以通过下面插件提取成一个独立模块，避免重复引入 (@babel/runtime)

• yarn add @babel/plugin-transform-runtime -D

7.配置 eslint 规则

• yarn add eslint eslint-loader babel-eslint -D

使用 airbnb 的规则

• yarn add eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y -D

8.引入字体 使用 url-loader 配置

9.在引入的时候+前缀 全局引入

• yarn add expose-loader -D

10.externals 引入然后不需要 webpack 打包起来，到时候我们直接引入 (外部引用)

• yarn add html-webpack-externals-plugin -D

11.拷贝静态文件

• yarn add copy-webpack-plugin -D

12.请求代理 在 devServer 那边配置映射

13.express 提供的 webpack-dev-server 静态服务器中间件,webpack-dev-middleware

• yarn add webpack-dev-middleware -D

15.多入口项目打包多页面项目 glob 获取多个入口 使用 glob, 代码如上

• yarn add glob -D

16.友好的显示信息的插件 friendly-errors-webpack-plugin

• yarn add friendly-errors-webpack-plugin -D

17.费时上报插件 speed-measure-webpack-plugin

• yarn add speed-measure-webpack-plugin -D

18.需要配合 webpack webpack-cli 一起使用，生成代码分析报告，帮助提高代码质量和网站性能

• yarn add webpack-bundle-analyzer -D

加入插件，然后修改 webpack 的配置文件，默认不开启分析页面的服务器

• “generateAnalyzerFile”: “webpack --profile --json > stats.json”

webpack --profile --json > stats.json 生成 stats.json 文件输出到和项目打包的目录一样

• “analyzer”: “webpack-bundle-analyzer --port 8888 ./dist/stats.json”

webpack-bundle-analyzer --port 8888 ./dist/stats.json 这个包启动这个 json 文件，并启动一个服务器，端口是 8888

19. polyfill 兼容一些东西不能在别的浏览器使用，不兼容问题，比如 promise 在 IE11 不行 (缺点太大，直接引入到项目中)

• yarn add babel-polyfill -D

可以使用一个脚本进行替代

[polyfill-service] polyfill.io 通过分析请求头的信息中的 UserAgent 实现自动加载浏览器所需要的 polyfills

20. libraryTarget 和 library (打包成库的玩法，看 webpack-study-2 项目)

• output.library 配置导出库的名称
• output.libraryExport 配置要导出模块中哪些子模块需要被导出。它只能在 output.library 被设置成 commonjs 或者 commonjs2 时使用才有意义
• output.libraryTarget 配置以何种方式导出库，是字符串的枚举类型，支持以下配置

写一个库，运用libraryTarget 和 library

• 实现数学运算的功能
• webpack 还可以打包 js 库，打包成压缩版和非压缩版的库.支持 CJS/ESM 方式导入
• require(‘xxx’) , import xxx from ‘xxx’

优化篇

14.图片压缩优化

• yarn add image-webpack-loader -D

21. purgecss-webpack-plugin 除去未使用的 css，一般和 glob，glob-all 配合使用

• yarn add purgecss-webpack-plugin -D

cdn 又叫内容分发网络，通过把资源部署到世界各地，用户在访问时按照就近原则从最近的服务器获取资源，从而加速资源的获取速度。

22. px 转化成 rem 的插件和 loader

• yarn add px2rem-loader lib-flexible -D

23. DLL .dll 为后缀的文件称为动态连接库，在一个动态连接库中可以包含给其他模块调用的函数和方法。 (dynamic link library) [webpack 库内置]

把基础模块独立出来打包到单独的动态连接库里

当需要导入的模块在动态连接库里的时候，模块不能再次被打包，而是去动态连接库中获取

dll-plugin 插件，用于打包除一个个动态连接库

dll-reference-plugin 插件，在配置文件中引入 DLLPlugin 插件打包好的动态连接库

[name].manifest.json 的文件(编译的时候需要而已，是一座桥梁，生产模式下没用)

• DllPlugin DllReferencePlugin 都在 webpack/lib/xxx 下面直接引入

24. tree shaking [摇树优化] 一个模块可以有多个方法，只要其中某个方法使用到了，则整个文件都会被打包到 bundle 里面去，tree shaking 就是只把用到的方法打入 bundle 中，没用到的方法会 uglify 阶段擦除掉。[有返回值的方法没人接受，也清除掉,多次赋值前面没有使用，最后一次使用留最后一次的赋值] [只要entry用到的，就不摇掉]

原理就是利用 es6 模块的特点，只能作为模块顶层语句出现，import 的模块名只能是字符串常量

• webpack4 默认支持，在.babelrc 里面设置[’@babel/preset-env’,{modules: false }] modules: false [保留es的模块化模式] ,即可在 production 模式下默认开启,防止打包整个库，只打包使用的，不过要设置 devtool 为 none|false
• 编写组件的时候，摇树要注意什么？ [require引用后但没用到也不能瑶掉,不要改变window啥的,能做到变量提升]
• 1.一定要尽量使用es6 modules
• 2.尽量编写没有副作用的代码

25. scope hoisting 让webpack打包出来的代码文件更小，运行速度更快，又叫做’作用域提升’ webpack3出现的功能。

webpack转换之后的模块会包裹上一层函数，import会转换成require

代码体积更小，因为函数申明语句会产生大量代码,包裹后不会产生

代码在运行时因为创建的函数作用域更少了，内存开销也随着变小

大量作用域包裹代码会导致体积变大

运行时创建的函数作用域变多，内存开销增大

scope hoisting的原理是将所有的模块按照引用顺序放在一个函数作用域中，如果适当地重命名一些变量以防止命名冲突

这个功能在mode为production下默认开启，开发环境需要用webpack.optimize.ModuleConcatenationPlugin插件，也要使用es6 module，cjs不支持这个。

26. 热加载 react-hot-loader 开发环境使用的[热加载是为了防止热更新刷新页面操作而产生的，主要是为了防止页面整体刷新，实现局部刷新,提高效率] 设置devServer.hot:true 和配置 webpack.HotModuleReplacementPlugin 插件

• yarn add react-hot-loader -D

// .babelrc
{
    "plugins":['react-hot-loader/babel']
}
// App.js
import { hot } from 'react-hot-loader';
const App = () => <div>Hello world!</div>;
export default hot(App); // 包裹，返回，热更新就替换 hot是一个高阶组件

代码分割 chunk 动态导入，代码分割相关

-   optimization: {
-     splitChunks: {
-       chunks: 'all'
-     }
-   }
+   output.chunkFilename: '[name].bundle.js',

module.exports = {
//...
  optimization: {
    splitChunks: {
      // 代码分割
      cacheGroups: {
        // node_modules下面的代码都放在vendors里面
        vendor: {
          chunks: 'initial', // 指定分割的类型，默认三种 all[全部] async[默认异步] initial[同步]
          name: 'vendors', // 给分割出去的代码块起名字
          test: /node_modules/, // 哪里的代码需要分割
          priority: -10 // 优化优先级
        },
        // 公共代码部分
        // 被2个或以上代码引用的的代码都放在commons里面
        commons: {
          chunks: 'initial',
          name: 'commons',
          minSize: 0, // 最小提取字节
          minChunks: 2, // 最少被几个chunk引用才被提取
          priority: -20 // 优化优先级
        }
      }
    }
  }
  // ...
}