webpack4配置之——22：辅助插件-cross-env、friendly-errors-webpack-plugin、node-notifier、webpack-bundle-analyzer

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里

`cross-env`

yarn add cross-env -D

cross-env 能够跨平台的设置及使用环境变量，修改package.json 文件的命令：

"dev": "cross-env NODE_ENV=development webpack --config webpack.dev.conf.js",
"start": "webpack-dev-server --config webpack.dev.conf.js --color --progress",
"test": "cross-env NODE_ENV=production webpack --config webpack.test.conf.js",
"build": "cross-env NODE_ENV=production webpack --config webpack.prod.conf.js"

这里测试环境的变量名也暂时设置成production，后期在整合配置文件时，会再做修改。

`friendly-errors-webpack-plugin node-notifier`

终端在运行webpack命令时会输出很多信息，让人看着不太舒服~ 那就需要使用这个插件来解决这个问题：

yarn add friendly-errors-webpack-plugin node-notifier -D

修改webpack.dev.conf.js配置文件:

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const notifier = require('node-notifier');


// 友好的终端错误显示方式
new FriendlyErrorsPlugin({
    // 运行成功
    compilationSuccessInfo:{
        message:[`你的应用程序在这里运行：http://${ip}:${this.port}`],
        // notes:['有些附加说明要在成功编辑时显示']
    },
    //  运行错误
    onErrors:function(severity,errors){
        // 可以收听插件转换和优先级的错误
        // 严重性可以是'错误'或'警告'
        if (severity !== 'error') {
            return;
          }
          const error = errors[0];
          notifier.notify({
            title: "Webpack error",
            message: severity + ': ' + error.name,
            subtitle: error.file || '',
            // icon: ICON
          });
    },
    //是否每次编译之间清除控制台
    //默认为true
    clearConsole:true,
}),

`webpack-bundle-analyzer`

可视化视图查看器，可以清楚的看到webpack打包后所有组件与组件的依赖关系，以及打包压缩后各文件的大小，还支持缩小捆绑，以及支持查看gzip的大小

yarn add webpack-bundle-analyzer -D

该插件具体参数如下：

new BundleAnalyzerPlugin({
  //  可以是`server`，`static`或`disabled`。
  //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
  //  在“静态”模式下，会生成带有报告的单个HTML文件。
  //  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
  analyzerMode: 'server',
  //  将在“服务器”模式下使用的主机启动HTTP服务器。
  analyzerHost: '127.0.0.1',
  //  将在“服务器”模式下使用的端口启动HTTP服务器。
  analyzerPort: 8888, 
  //  路径捆绑，将在`static`模式下生成的报告文件。
  //  相对于捆绑输出目录。
  reportFilename: 'report.html',
  //  模块大小默认显示在报告中。
  //  应该是`stat`，`parsed`或者`gzip`中的一个。
  //  有关更多信息，请参见“定义”一节。
  defaultSizes: 'parsed',
  //  在默认浏览器中自动打开报告
  openAnalyzer: true,
  //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
  generateStatsFile: false, 
  //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
  //  相对于捆绑输出目录。
  statsFilename: 'stats.json',
  //  stats.toJson（）方法的选项。
  //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。
  //  在这里查看更多选项：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
  statsOptions: null,
  logLevel: 'info' 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
})

该插件在任何环境都可以用，这里主要看打包成生产环境后，知道各文件的依赖关系，以及文件大小，所以暂时只修改webpack.prod.conf.js:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 在 plugin 中添加以下代码：
new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    //  是否在默认浏览器中自动打开报告
    openAnalyzer: false,
    //  将在“服务器”模式下使用的端口启动HTTP服务器。
    analyzerPort: 9528, 
    reportFilename: 'static/report.html',
})

这里我选择了静态模式下，将生成的报告文件输出到static文件夹下，在执行过yarn build后，可以打开dist文件夹看到生成的该文件，直接打开就可以看本项目的各文件的大小了；

当然，也可以选择服务器模式，将static改为server即可，再次执行yarn build，这时要想看，需要开启本地服务支持(iis或者其他)，使用这里设置的端口号就可以看到了

测试环境webpack.test.conf.js也可以添加该插件配置。