21 个最佳 Webpack 插件提高前端工作流程-FunTeaLearn Online Web Tutorials

Webpack 是前端开发中最常用的构建工具之一，它可以帮助我们将多个 JavaScript 文件和其他资源打包成一个或多个文件，以便在网页中使用。在 Webpack 的构建过程中，我们可以使用各种插件来提高我们的工作流程和代码质量。本文将介绍 21 个最佳 Webpack 插件，它们可以帮助我们更好地管理依赖、优化性能、提高开发效率等。

1. clean-webpack-plugin

每次构建时，我们都需要清除之前的构建文件，以免旧文件对新文件产生影响。clean-webpack-plugin 可以帮助我们自动清除构建目录中的旧文件。

// www.javascriptcn.com code example
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    // ...
  ],
};

2. html-webpack-plugin

html-webpack-plugin 可以帮助我们在构建时自动生成 HTML 文件，并自动将打包后的 JavaScript 文件引入到 HTML 文件中。

// www.javascriptcn.com code example
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    // ...
  ],
};

3. mini-css-extract-plugin

mini-css-extract-plugin 可以将 CSS 文件从 JavaScript 文件中分离出来，并将其打包成一个单独的文件。

// www.javascriptcn.com code example
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
    // ...
  ],
};

4. style-loader

style-loader 可以将 CSS 文件插入到 HTML 文件的 <head> 中。

// www.javascriptcn.com code example
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  // ...
};

5. webpack-dev-server

webpack-dev-server 可以帮助我们在开发过程中快速启动一个本地服务器，并自动刷新页面。

// www.javascriptcn.com code example
module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    port: 8080,
    hot: true,
  },
  // ...
};

6. babel-loader

babel-loader 可以帮助我们将 ES6+ 代码转换成 ES5 代码，以便在旧版浏览器中运行。

// www.javascriptcn.com code example
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  // ...
};

7. terser-webpack-plugin

terser-webpack-plugin 可以帮助我们压缩 JavaScript 代码，以减少文件大小和加载时间。

// www.javascriptcn.com code example
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  // ...
};

8. optimize-css-assets-webpack-plugin

optimize-css-assets-webpack-plugin 可以帮助我们压缩 CSS 代码，以减少文件大小和加载时间。

// www.javascriptcn.com code example
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [new OptimizeCssAssetsPlugin()],
  },
  // ...
};

9. copy-webpack-plugin

copy-webpack-plugin 可以帮助我们将文件从源目录复制到构建目录中。

// www.javascriptcn.com code example
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public',
          to: '.',
        },
      ],
    }),
    // ...
  ],
};

10. webpack-bundle-analyzer

webpack-bundle-analyzer 可以帮助我们分析打包后的文件大小和依赖关系，以优化构建效率和性能。

// www.javascriptcn.com code example
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  // ...
  plugins: [
    new BundleAnalyzerPlugin(),
    // ...
  ],
};

11. compression-webpack-plugin

compression-webpack-plugin 可以帮助我们将文件压缩成 gzip 格式，以减少文件大小和加载时间。

// www.javascriptcn.com code example
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CompressionPlugin(),
    // ...
  ],
};

12. webpack-merge

webpack-merge 可以帮助我们将多个 webpack 配置文件合并成一个。

// www.javascriptcn.com code example
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common');
const prodConfig = require('./webpack.prod');
const devConfig = require('./webpack.dev');

module.exports = (env) => {
  const isProd = env.production;
  const config = isProd ? prodConfig : devConfig;
  return merge(commonConfig, config);
};

13. friendly-errors-webpack-plugin

friendly-errors-webpack-plugin 可以帮助我们在构建时输出更友好的错误信息，以便更快地修复错误。

// www.javascriptcn.com code example
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new FriendlyErrorsWebpackPlugin(),
    // ...
  ],
};

14. webpack-manifest-plugin

webpack-manifest-plugin 可以帮助我们生成一个映射文件，将项目中的模块 ID 映射到打包后的文件中。

// www.javascriptcn.com code example
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  // ...
  plugins: [
    new ManifestPlugin(),
    // ...
  ],
};

15. webpack-babel-multi-target-plugin

webpack-babel-multi-target-plugin 可以帮助我们根据目标浏览器自动选择需要转换的 JavaScript 特性。

// www.javascriptcn.com code example
const { WebpackBabelMultiTargetPlugin } = require('webpack-babel-multi-target-plugin');

module.exports = {
  // ...
  plugins: [
    new WebpackBabelMultiTargetPlugin(),
    // ...
  ],
};

16. webpack-cdn-plugin

webpack-cdn-plugin 可以帮助我们将第三方库从本地文件加载改为从 CDN 加载，以提高加载速度和缓存效果。

// www.javascriptcn.com code example
const { WebpackCdnPlugin } = require('webpack-cdn-plugin');

module.exports = {
  // ...
  plugins: [
    new WebpackCdnPlugin({
      modules: [
        {
          name: 'react',
          var: 'React',
          path: 'umd/react.production.min.js',
        },
        // ...
      ],
    }),
    // ...
  ],
};

17. webpack-bundle-size-analyzer

webpack-bundle-size-analyzer 可以帮助我们分析打包后的文件大小和依赖关系，以优化构建效率和性能。

// www.javascriptcn.com code example
const { WebpackBundleSizeAnalyzerPlugin } = require('webpack-bundle-size-analyzer');

module.exports = {
  // ...
  plugins: [
    new WebpackBundleSizeAnalyzerPlugin(),
    // ...
  ],
};

18. webpack-monitor

webpack-monitor 可以帮助我们监控构建过程中的性能和资源使用情况。

// www.javascriptcn.com code example
const { WebpackMonitor } = require('webpack-monitor');

module.exports = {
  // ...
  plugins: [
    new WebpackMonitor({
      capture: true,
      target: './monitor/stats.json',
      launch: true,
      port: 3030,
    }),
    // ...
  ],
};

19. webpack-build-notifier

webpack-build-notifier 可以帮助我们在构建完成时发送通知，以便我们及时得知构建状态。

// www.javascriptcn.com code example
const { WebpackBuildNotifierPlugin } = require('webpack-build-notifier');

module.exports = {
  // ...
  plugins: [
    new WebpackBuildNotifierPlugin({
      title: 'My App',
      logo: path.resolve('./logo.png'),
      suppressSuccess: true,
    }),
    // ...
  ],
};

20. webpack-subresource-integrity

webpack-subresource-integrity 可以帮助我们生成 SRI 校验码，以提高资源的安全性和可靠性。

// www.javascriptcn.com code example
const { WebpackSubresourceIntegrity } = require('webpack-subresource-integrity');

module.exports = {
  // ...
  plugins: [
    new WebpackSubresourceIntegrity({
      hashFuncNames: ['sha384'],
    }),
    // ...
  ],
};

21. webpack-spritesmith

webpack-spritesmith 可以帮助我们将多个图片合并成一个雪碧图，并生成对应的 CSS 样式。

// www.javascriptcn.com code example
const SpritesmithPlugin = require('webpack-spritesmith');

module.exports = {
  // ...
  plugins: [
    new SpritesmithPlugin({
      src: {
        cwd: path.resolve(__dirname, 'src/assets/icons'),
        glob: '*.png',
      },
      target: {
        image: path.resolve(__dirname, 'src/assets/sprites.png'),
        css: path.resolve(__dirname, 'src/assets/sprites.css'),
      },
      apiOptions: {
        cssImageRef: '../sprites.png',
      },
    }),
    // ...
  ],
};

结语

以上是 21 个最佳 Webpack 插件，它们可以帮助我们更好地管理依赖、优化性能、提高开发效率等。在使用这些插件时，我们应该根据项目需求和实际情况进行选择和配置，以便达到最佳的效果和性能。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d902d8a941bf713406cd32

21 个最佳 Webpack 插件提高前端工作流程