为了方便维护和交流,文档统一迁移到语雀: https://yuque.com/easy-team. 该文档不再更新维护

plugins 配置

内置plugin

plugin 别名 默认是否开启/开启环境
npm-install-webpack-plugin npm
webpack.NamedModulesPlugin nameModule 是/dev
webpack.HashedModuleIdsPlugin hashModule 是/test,prod
webpack.optimize.ModuleConcatenationPlugin module
webpack.NoEmitOnErrorsPlugin error
webpack.HotModuleReplacementPlugin hot 是/dev
webpack-manifest-plugin manifest
progress-bar-webpack-plugin progress 是/dev
directory-named-webpack-plugin directoryname
extract-text-webpack-plugin extract
webpack.optimize.CommonsChunkPlugin commonsChunk
html-webpack-plugin html
webpack.optimize.UglifyJsPlugin uglifyJs 是/prod
imagemin-webpack-plugin imagemini 是/prod
webpack-bundle-analyzer analyzer
stats-webpack-plugin stats
service-worker-precache-webpack-plugin serviceworker

config.plugins 配置

config.plugins 非必须,支持 Object | Array。 这里的plugins 是对 Webpack plugins 的简化和增强。建议用 增强配置 方式配置.

  • 兼容 Webpack 原生数组配置
  • [增强]支持通过别名对内置 plugin 插件的开启和禁用,以及参数配置
  • [增强]支持通过别名的方式添加 plugin 插件
内置 plugin 扩展参数统一通过 args 节点配置
// ${app_root}/webpack.config.js
module.exports = {
  plugins:{
     ${plugin别名}:{
      args:{
        // 具体plugin参数
      }
    }
  }
}
Webpack 原生数组配置举例
// ${app_root}/webpack.config.js
module.exports = {
  ......
  plugins:[
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    { 
      label: 'nameModule', // 非必需
      env: ['dev'] // 非必需
      name: webpack.NamedModulesPlugin() // name 必须
    }
  ]
}
Webpack plugins 增强配置举例
// ${app_root}/webpack.config.js
module.exports = {
  ......
  plugins:{
    error: true,  //  webpack.NoEmitOnErrorsPlugin 已内置
    hot: true,   //  webpack.HotModuleReplacementPlugin 已内置
    nameModule: { // webpack.NamedModulesPlugin  已内置
      env: ['dev']
    }
  }
}

key:value 形式, 其中 key 为别名, 可以自由定义, easywebpack和对应解决方案内置了一些别名plugin.

比如我要添加一个全新且easywebpack没有内置的 webpack-visualizer-plugin 插件, 可以这样配置如下:

{
  plugins:{
    visualizer:{
      env: ['dev'], //  开发环境启用
      name: webpack-visualizer-plugin,
      args: {
       filename: './visualizer.html'
      }
    }
  }
}

var Visualizer = require('webpack-visualizer-plugin');

{
  plugins:{
    visualizer:{
      env: ['dev'], //  开发环境启用
      name: new Visualizer({ filename: './visualizer.html'})
    }
  }
}

修改已经内置 easywebpack 的压缩插件 uglifyJs 配置信息

自定义已经内置 easywebpack plugin 插件的参数信息, 统一通过 args 配置

{
  plugins:{
    uglifyJs: {
      args: {
        compress: {
          warnings: false,
          dead_code: true,
          drop_console: true,
          drop_debugger: true
        }
      }
    }
  }
}

禁用 uglifyJs 配置

{
  plugins:{
    uglifyJs: false
  }
}

config.plugins 配置相属性介绍

  • env: 见 config.env 说明, 可选, 默认全部

  • type: 见 config.type 说明, 可选, 默认全部

  • enable: {Boolean/Function} 是否启用, 可选, 默认可用

  • name: {String/Object} 插件名称, 支持字符串或Object

  • args: {Object/Function} 插件参数