内置plugin

plugin 别名 默认是否开启/开启环境
npm-install-webpack-plugin npm
webpack.DefinePlugin define
webpack.NamedModulesPlugin nameModule 是/dev
webpack.HashedModuleIdsPlugin hashModule 是/test,prod
webpack.optimize.ModuleConcatenationPlugin module
webpack.NoEmitOnErrorsPlugin error
webpack.HotModuleReplacementPlugin hot 是/dev
webpack-manifest-resource-plugin manifest
progress-bar-webpack-plugin progress 是/dev
directory-named-webpack-plugin directoryname
mini-css-extract-plugin extract 是/test, prod
webpack.optimize.CommonsChunkPlugin commonsChunk
html-webpack-plugin html
webpack.optimize.UglifyJsPlugin uglifyJs 是/prod
imagemin-webpack-plugin imagemini 是/prod
webpack-bundle-analyzer analyzer
命令行开启:
easy build –size
stats-webpack-plugin stats
命令行开启:
easy build –size stats
speed-measure-webpack-plugin speed
命令行开启:
easy build –speed
service-worker-precache-webpack-plugin serviceworker
clean-webpack-plugin clean 是(test, prod), >=easywebpack@4.6.0
optimize-css-assets-webpack-plugin cssmini 是(prod), >=easywebpack@4.7.1
copy-webpack-plugin copy
webpack-filter-warnings-plugin filter
>=easywebpack@4.10.0

config.plugins 配置

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

  • 兼容 Webpack 原生数组配置

  • [增强]支持通过别名对内置 plugin 插件的开启和禁用,以及参数配置

  • [增强]支持通过别名的方式添加 plugin 插件

插件配置规范

  • 内置 plugin 扩展参数统一通过 args 节点配置

// ${app_root}/webpack.config.js
module.exports = {
  plugins:[
    {
     ${plugin别名}:{}  // 值可以为 Boolean | Object
    }
  ]
}

或

module.exports = {
  plugins:{
     ${plugin别名}:{}  // 值可以为 Boolean | Object
    }
  }
}

插件配置举例

// ${app_root}/webpack.config.js
module.exports = {
  ......
  plugins:[
    { uglifyJs: false }, // 禁用内置js/css压缩插件配置
    { imagemini: false }, // 禁用内置图片压缩插件配置
    { ts: true }, // 开启内置插件配置
    { copy: [ { from: 'app/web/asset', to: 'public/asset' } ], // 已内置插件配置
    new webpack.NoEmitOnErrorsPlugin(), // 原生组件
    new webpack.HotModuleReplacementPlugin(), //原生组件
    {
      env: ['dev'] // 非必需,支持 dev, test, prod 默认所有
      name: new webpack.NamedModulesPlugin() // 插件实例
    }
  ]
}

添加新插件

我要添加一个全新且 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 3
{
  plugins:{
    uglifyJs: {
      args: {
        compress: {
          warnings: false,
          dead_code: true,
          drop_console: true,
          drop_debugger: true
        }
      }
    }
  }
}

// easywebpack 4 (args 参数可省略)
{
  plugins:{
    uglifyJs: {
      args: {
        uglifyOptions: {
          warnings: false,
          compress: {
            dead_code: true,
            drop_console: true,
            drop_debugger: true
          },
          output: {
            comments: false
          }
        }
      }
    }
  }
}

添加环境变量 webpack.DefinePlugin

// ${app_root}/webpack.config.js
module.exports = {
  plugins:{
    define:{
         'BUILD_MODE': process.env.BUILD_ENV
    }
  }
}

自动加载模块 webpack.ProvidePlugin

// ${app_root}/webpack.config.js
module.exports = {
  plugins:{
    provide:{
       $: 'jquery',
       jQuery: 'jquery'
    }
  }
}

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
optimizaiton optimizaiton
从 webpack 4 开始,会根据你选择的 mode 来执行不同的优化,你可以通过 optimizaiton  节点进行覆盖配置。在 easywebpack  体系中,会进行进步配置简化。easywebpack 默认配置请根据需要,覆盖默认配置runtimeChunk 默认文件名为 runt...
2019-12-23 sky
Next 
PostCss PostCss
默认配置postcss.config.js
2019-12-23 sky