webpack

webpack

webpack 中的 loader 和 plugin 区别是什么？

一、

1. loader 是加载器
2. plugin 是插件

二、用途

1. 加载器用来加载文件 例如：
   • babel loader用来加载高级js，将其变成低版本支持的js。
   • css loader 是把css 变成页面中的<style>标签。
   • 加载图片，对图片优化
2. plugin 插件是扩展功能
   例如：
   • 插件HtmlWebpackPlugin，用来生成html文件
   • MiniCssExtractPlugin, 用来抽取css代码，变成文件。

懒加载

如何懒加载呢？

button.onclick = () => {
    const promise = import('./lazy')
    promise.then((module) => {
        const fn = module.default
        fn()
    }, () => {
        console.log('模块加载错误')
    })
}
//用 import() 加载文件，然后得到一个 promise.then(成功,失败)