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} 插件参数