refactor webpack

Author: silverwind

webpack.config.js

@@ -39,75 +39,6 @@ const filterCssImport = (url, ...args) => {
   return true;
 };
 
-const plugins = [
-  new VueLoaderPlugin(),
-  // avoid generating useless js output files for css--only chunks
-  new FixStyleOnlyEntriesPlugin({
-    extensions: ['less', 'scss', 'css'],
-    silent: true,
-  }),
-  new MiniCssExtractPlugin({
-    filename: 'css/[name].css',
-    chunkFilename: 'css/[name].css',
-  }),
-  new SourceMapDevToolPlugin({
-    filename: '[file].map',
-    include: [
-      'js/index.js',
-      'css/index.css',
-    ],
-  }),
-  new MonacoWebpackPlugin({
-    filename: 'js/monaco-[name].worker.js',
-  }),
-  new LicenseWebpackPlugin({
-    outputFilename: 'js/licenses.txt',
-    perChunkOutput: false,
-    addBanner: false,
-    skipChildCompilers: true,
-    modulesDirectories: [
-      resolve(__dirname, 'node_modules'),
-    ],
-    renderLicenses: (modules) => {
-      const line = '-'.repeat(80);
-      return modules.map((module) => {
-        const {name, version} = module.packageJson;
-        const {licenseId, licenseText} = module;
-        const body = wrapAnsi(licenseText || '', 80);
-        return `${line}\n${name}@${version} - ${licenseId}\n${line}\n${body}`;
-      }).join('\n');
-    },
-    stats: {
-      warnings: false,
-      errors: true,
-    },
-  }),
-];
-
-if (isProduction) {
-  plugins.push(
-    new CompressionPlugin({
-      filename: '[path].gz',
-      algorithm: 'gzip',
-      test: /\.(js|css)$/,
-      compressionOptions: {
-        level: constants.Z_BEST_COMPRESSION,
-      },
-      threshold: 10240,
-    }),
-    new CompressionPlugin({
-      filename: '[path].br',
-      algorithm: 'brotliCompress',
-      test: /\.(js|css)$/,
-      compressionOptions: {
-        [constants.BROTLI_PARAM_QUALITY]: constants.BROTLI_MAX_QUALITY,
-      },
-      threshold: 10240,
-    }),
-  );
-}
-
-
 module.exports = {
   mode: isProduction ? 'production' : 'development',
   entry: {
@@ -326,7 +257,68 @@ module.exports = {
       },
     ],
   },
-  plugins,
+  plugins: [
+    new VueLoaderPlugin(),
+    // avoid generating useless js output files for css--only chunks
+    new FixStyleOnlyEntriesPlugin({
+      extensions: ['less', 'scss', 'css'],
+      silent: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].css',
+      chunkFilename: 'css/[name].css',
+    }),
+    new SourceMapDevToolPlugin({
+      filename: '[file].map',
+      include: [
+        'js/index.js',
+        'css/index.css',
+      ],
+    }),
+    new MonacoWebpackPlugin({
+      filename: 'js/monaco-[name].worker.js',
+    }),
+    new LicenseWebpackPlugin({
+      outputFilename: 'js/licenses.txt',
+      perChunkOutput: false,
+      addBanner: false,
+      skipChildCompilers: true,
+      modulesDirectories: [
+        resolve(__dirname, 'node_modules'),
+      ],
+      renderLicenses: (modules) => {
+        const line = '-'.repeat(80);
+        return modules.map((module) => {
+          const {name, version} = module.packageJson;
+          const {licenseId, licenseText} = module;
+          const body = wrapAnsi(licenseText || '', 80);
+          return `${line}\n${name}@${version} - ${licenseId}\n${line}\n${body}`;
+        }).join('\n');
+      },
+      stats: {
+        warnings: false,
+        errors: true,
+      },
+    }),
+    isProduction && new CompressionPlugin({
+      filename: '[path].gz',
+      algorithm: 'gzip',
+      test: /\.(js|css)$/,
+      compressionOptions: {
+        level: constants.Z_BEST_COMPRESSION,
+      },
+      threshold: 10240,
+    }),
+    isProduction && new CompressionPlugin({
+      filename: '[path].br',
+      algorithm: 'brotliCompress',
+      test: /\.(js|css)$/,
+      compressionOptions: {
+        [constants.BROTLI_PARAM_QUALITY]: constants.BROTLI_MAX_QUALITY,
+      },
+      threshold: 10240,
+    }),
+  ].filter((plugin) => !!plugin),
   performance: {
     hints: false,
     maxEntrypointSize: Infinity,