31.webpack相关的一些总结

我的GIS
109 阅读3分钟

webpack打包的基本流程

  1. 连接: webpack从入口js(app.js)开始,递归查找出所有相关的模块,并【连接】起来形成一个图(网)的结构
  2. 编译: 将jS模块中的模块化语法【编译】为浏览器可以直接运行的模块语法(当然其它类型资源也会处理)
  3. 合并: 将图中所有编译过的模块【合并】成一个或少量的几个文件浏览器真正运行是打包后的文件

比较loader与plugins

  1. loader: 用于加载特定类型的资源文件，webpack本身只能打包js和json
  2. plugin: 用来扩展webpack其它方面的功能一般loader处理不了的资源、完成不了的操作交给插件处理。

dev-serve: live-reload (自动刷新,默认开启) 与 HMR(热模替换hot)

  1. 相同点:
    代码修改后都会自动重新编译打包
  2. 不同点:
    live-reload: 刷新整体页面，从而查看到最新代码的效果，页面状态全部都是新的
    HMR: 没有刷新整个页面，只是加载了修改模块的打包文件并运行，从而更新页面的局部界面，整个界面的其它部分的状态还在

webpack常用 loader 与 plugin 汇总

常用loader:

  1. 【less-loader】:用于将less文件翻译成为css
  2. 【css-loader】:用于将css以common js语法打包到js中
  3. 【style-loader】:用于动态创建一个style标签，将css引入页面
  4. 【file-loader】:用于处理其他资源，也可以处理图片资源，核心操作就是:提取资源到指定位置，且可修改文件名等操作
  5. 【url-loader】:与file-loader功能几乎一致，优势是可以对图片进行动态转换base64编码(控制limit属性值可以控制阈值)
    备注:上述两个loader中url-loader应用比file-loader广泛，且url-loader是file-loader的上层封装
  6. 【html-loader】:用于处理html中标签的图片
  7. 【esint-loader】:对项目中的js语法进行检查
  8. 【babel-loader】:将es6语法转换为es5语法
    备注1:直接使用只能处理简单的语法，Promise等无法处理
    备注2:借助polyfill完成高级es6语法的转换，缺点:所有都转换，无法按需转换，生成的js体积大
    备注3:使用core-js配合polyfill完成按需转换
  9. 【postcss-loader】:经典的loader，用于处理css兼容性问题，需要与【postcss】和【postcss-preset-env】配合使用
    备注1:使用的时机为:["css-loader","postcss-loader","less-loader"]
    备注2:需要在package.json中配置browserslist属性指定具体的兼容规则
    备注3:browserslist是一个单独的库，被广泛用在各种涉及浏览器/移动端的兼容性支持工具中

常用pulgins:

  1. 【mini-css-extract-plugin】:用于提取项目中的css为一个单独的文件
  • 备注1:使用的时机为:[MiniCssExtractplugin.loader,"css-loader","postcss-loader" less-loader"]
  • 备注2:使用时可以在new时传入具体配置例如:
{
    loader: "postcss-loader",
    options: {
        postcssOptions: {
            plugins: {"postcss-preset-env"}
        }
    }
}
  1. 【html-webpack-plugin】:根据指定模板，自动创建html文件，且自动引入外部资源
  2. 【eslint-plugin-import】:用于配合eslint-loader
  3. 【eslint-config-airbnb-base】:用于引入airbnb配置好的语法检查规则，否则需要一个一个配置，比较麻烦
  4. 【@babel/polyfill】:用于处理JS兼容性问题，例如IE浏览器不支持Promise
  5. 【optimize-css-assets-webpack-plugin】:用于压缩CSS

webpack中的tree-shaking(生产模式 + ES6 → 模块化默认开启)

  1. 概述:有些时候，我们一个模块向外暴露了n个函数、对象、或其他一些数据，但是我们只是用到了其中的个或几个，那在最终打包的时候，我们只希望把我们所用的打包进去，这时候就要tree-shaking，即:去除无用代码
  2. 配置: 同时满足两个条件webpack会自动开启tree-shaking
    • 使用ES6模块化
    • 开启production环境
avatar
文章
阅读
粉丝