美文网首页程序员
利用插件机制横向扩展`webpack`构建能力

利用插件机制横向扩展`webpack`构建能力

作者: 翔子丶 | 来源:发表于2020-12-02 09:07 被阅读0次

    利用插件机制横向扩展webpack构建能力

    webpack插件机制是为了增强webpack在项目自动化构建方面的能力(解决除loader资源模块打包外的其他自动化工作)

    常见应用场景:
    • 实现自动在打包之前清除dist目录,clean-webpack-plugin

      每次打包都会覆盖到dist目录,只能覆盖同名文件,需要配置output.path

    • 自动生成应用所需的HTML文件,html-webpack-plugin

      html中自动注入webpack打包生成的bundle

    • 根据不同环境为代码注入类似API地址这种可能变化的部分

    • 拷贝不需要参与打包的资源文件到输出目录,copy-webpack-plugin

    • 压缩webpack打包完成后输出的文件

    • 自动发布打包结果到服务器实现自动部署

    开发一个插件

    webpack的插件机制是软件开发中最常见的钩子机制(类似web中的事件)

    webpack整个工作过程有很多环节,便于插件的扩展,webpack在每个环节都埋下一颗钩子,这样开发插件的时候,通过往这些节点挂在不同的任务,就可以轻松扩展webpack的能力

    需求:清除webpack打包结果的注释

    探索webpack运行机制和核心工作原理

    了解webpack整个工作过程细节 (查阅代码) 例子

    相关文章

      网友评论

        本文标题:利用插件机制横向扩展`webpack`构建能力

        本文链接:https://www.haomeiwen.com/subject/lklywktx.html