美文网首页
Webpack Plugins

Webpack Plugins

作者: Transnet2014 | 来源:发表于2017-07-31 23:36 被阅读567次

    插件系统是 Webpack 灵活性所在,Loaders做不到的,便可以在这里使用 Webpack API 丰富你的开发过程。

    你可以贡献自己的 Plugins,开发一个插件也不算困难,Webpack将临时文件放在内存里,甚至于存在一个大对象(complication)里面,所以不管是谁写插件,直接拿出来读写就行了。

    export default function newWebpackPlugin(){
      //this is what you do while call this 
    }
    newWebpackPlugin.prototype.apply=(compiler)=>{
      compiler.plugin('run', (compiler, cb)=>{
        console.log('holy, you have a new webpack plugin')
        cb();
      })
    }
    

    当然我劝你还是先看看社区贡献了哪些。

    处理 JavaScript

    UglifyjsWebpackPlugin

    使用UglifyJS丑化项目中的代码,Webpack@3已内置这个插件

    BabiliWebapckPlugin

    基于Babel的剪裁工具

    ComponentWebpackPlugin

    通过Webpack配置组件

    处理 HTML

    HtmlWebpackPlugin

    简单创建HTML文件,作为程序的入口
    常用配置项:

    处理 CSS

    ExtractTextWebpackPlugin

    从bundle中提取文本(CSS)到单独的文件中
    常用配置项:

    处理 Webpack chunks

    CommonChunkPlugin

    提取chunks之间的共享的通用模块
    常用配置项:

    • name(names): string | Array
    • minChunk: number [2,Infinity) | fn
    • chunk: string | Array

    AggressiveSplittingPlugin

    将原来的chunk分成更小的chunk
    常用配置项:

    HotModuleReplacementPlugin

    启用模块热替换(HMR)

    BannerPlugin

    在每个生成的chunk顶部添加banner

    相关文章

      网友评论

          本文标题:Webpack Plugins

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