webpack拓展

最新推荐文章于 2022-09-03 14:29:53 发布

cold-coffee

最新推荐文章于 2022-09-03 14:29:53 发布

阅读量177

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_41797053/article/details/110660286

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

webpack拓展

什么是loader？有什么用？

loader本质上就是一个函数，该函数接收webpack打包时读取的文件内容，经过函数内部处理后得到一个抽象语法树。比如important引入的文件、将typeScript转换成JavaScript语法。
主要功能：**转换代码，**对源代码进行解析，将各种浏览器不支持的语法进行转换（如less、sass）,兼容各大主流浏览器也是这一步
简化代码模拟

    module.exports - function(sourceCode) {
        // 在函数体内部对读取的源代码进行转换
        ...
        ....

        return "返回处理的代码，给AST解析，得到一个抽象语法树"
    }

执行时间节点是在得到抽象语法树之前

CSS工程化（loader能解决的问题）

在大型项目中CSS存在的问题
- 类名重复
- 样式不能复用
- 若修改主色调，则可能面临大部分修改的情况
webpack提供的解决方案
- 使用css-loader将css文件导出成字符串形式，让webpack能够读取，包括找到CSS中的依赖
- 使用file-loader或url-loader，转换CSS文件中的图片引用路劲
- 使用style-loader,将css-loader读取的内容转换成AST抽象语法树，然后做进一步处理，最后添加到页面中
  也就是css预处理语言诞生的原因，如less、sass

CSS预编译

less的安装和打包
- less安装
  npm i less
less文件编译
- 选中要编译的less文件
  npm lessc 要编译的less文件名编译后的文件名

什么是plugin？有什么用？

plugin是webpack拓展功能的入口，一般使用的第三方插件都在plugin里面配置，比如vue-router、vueX、axios、Sass…
plugin是一个数组，里面是拓展功能执行的函数。
plugin的运行时间
自定义插件，模拟第三方插件

    module.exports = class MyPlugin {
        apply(compiler) {
            // 仅仅在初始化时会执行一次
            console.log("插件运行了")
            /**
             * 0. 形如 compiler.hooks.事件名称.事件类型("自定义名称"， function(compilation) {})
             * 1. 在这里注册事件，类似于window.onload,这里的事件是指webpack打包过程中会触发的事件，具体的事件名和事件类型看官网
             * 2. 注册事件成功后，若webpack.config.js配置了监听，那么每次保存都会触发注册的事件
             * 3. 一般第三方插件的处理都在注册的事件中完成
             */
            compiler.hooks.done.tap("myPlugin", function(compilation) {
                // 每次保存都会运行，第三方插件功能具体实现的地方
                console.log("运行事件处理函数------")
            })
        }
    }

在webpack.config.js文件中引入并注册

    var path = require('path');
    var MyPlugin = require("./plugin/index")
    module.exports = {
        watch: true,
        plugins: [ new MyPlugin() ] // 注册自定义的插件
    }