webpack基础知识-plugin

Webpack 插件介绍

Webpack 是一个强大的前端构建工具，它可以帮助开发者管理和打包项目中的各种资源，包括 JavaScript、CSS、HTML、图片等。Webpack 插件是扩展 Webpack 功能的关键组成部分，它们可以用于优化、压缩、分割代码、处理资源等，以提高项目的性能和可维护性。

自动生成 HTML 文件

HtmlWebpackPlugin

• 描述：HtmlWebpackPlugin 用于自动生成 HTML 文件，并将打包生成的 JavaScript 文件自动注入到 HTML 中。它还支持自定义 HTML 模板，实现资源缓存等功能。
• 使用：配置 HtmlWebpackPlugin 后，你可以在 webpack.config.js 中添加插件配置来生成 HTML 文件，例如指定模板和输出文件名。

   const HtmlWebpackPlugin = require('html-webpack-plugin');

   module.exports = {
       plugins: [
		    new HtmlWebpackPlugin({
		      title: '知雀',
		      template: path.resolve(__dirname, 'public', 'index.html'),
		    }),
       ]
   };

提取 CSS 文件

MiniCssExtractPlugin

• 描述：这个插件用于将 CSS 从 JavaScript 文件中分离出来，生成独立的 CSS 文件，可以实现更好的样式加载性能和浏览器缓存。
• 使用：配置 MiniCssExtractPlugin 后，你可以在 webpack.config.js 中添加插件配置，以将 CSS 提取到单独的文件。

   const MiniCssExtractPlugin = require('mini-css-extract-plugin');

   module.exports = {
       module: {
           rules: [
               {
                   test: /\.css$/,
                   use: [
                       MiniCssExtractPlugin.loader,
                       'css-loader'
                   ]
               }
           ]
       },
       plugins: [
           new MiniCssExtractPlugin({
		      // 输出的每个css文件的名称
		      filename: 'static/css/[name].css',
		      // 按需加载的chunk文件名称
		      chunkFilename: 'static/css/[id].chunk.css',
		    }),
       ]
   };

清除输出目录

CleanWebpackPlugin

• 描述：CleanWebpackPlugin 用于在每次构建前清除输出目录，以确保构建结果的干净和一致性。
• 使用：配置 CleanWebpackPlugin 后，插件会自动清除指定的输出目录。

   const { CleanWebpackPlugin } = require('clean-webpack-plugin');

   module.exports = {
       output: {
           path: path.resolve(__dirname, 'dist')
       },
       plugins: [
           new CleanWebpackPlugin({
		      cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, 'dist')],
		    }),
       ]
   };

开发服务器

Webpack Dev Server

• 描述：Webpack Dev Server 是一个开发服务器插件，用于在开发过程中实时监测代码变化并自动刷新浏览器，提供热模块替换（HMR）功能，以加快开发流程。
• 使用：你可以在开发配置中使用 webpack-dev-server，并配置相应选项，如端口号、代理等。

module.exports = {
	// 开发服务器配置
	  devServer: {
	    // 静态资源配置
	    static: {
	      // 静态文件路径
	      directory: path.join(__dirname, 'public'),
	    },
	    // history路由必须启用，将请求重定向至index.html
	    historyApiFallback: true,
	    // 监听端口
	    port: 8000,
	    client: {
	      progress: true,
	    },
	  },
}

复制静态文件

CopyWebpackPlugin

• 描述：CopyWebpackPlugin 用于复制静态文件或文件夹到输出目录，例如，将字体、图片或其他不需要处理的资源复制到发布目录。
• 使用：配置 CopyWebpackPlugin 后，你可以在 webpack.config.js 中添加插件配置，指定要复制的文件或目录。

   const CopyWebpackPlugin = require('copy-webpack-plugin');

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

定义全局常量

DefinePlugin

• 描述：DefinePlugin 允许你在代码中定义全局常量，这些常量可以在构建过程中被替换，用于配置不同环境的变量。
• 使用：在 webpack.config.js 中配置 DefinePlugin，以定义全局常量。

   const webpack = require('webpack');

   module.exports = {
       plugins: [
           new webpack.DefinePlugin({
		      'process.env': {
		        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
		        API_HOST: JSON.stringify(
		          process.env.API_HOST || 'http://127.0.0.1:8080',
		        ),
		        AUTH_SELF_URL: JSON.stringify(
		          process.env.AUTH_SELF_URL ||
		            'http://127.0.0.1:8080/v1/account/users/self',
		        ),
		        LOGIN_URL: JSON.stringify(
		          process.env.LOGIN_URL || 'http://127.0.0.1:8080/oauth/login',
		        ),
		      },
		    }),
       ]
   };

合并配置

Webpack-merge

• 描述：Webpack-merge 用于合并多个 Webpack 配置文件，允许你为不同的环境配置不同的构建规则。
• 使用：在不同的配置文件中使用 webpack-merge 合并共用配置，以避免重复配置。

   const merge = require('webpack-merge');
   const commonConfig = require('./webpack.common.js');

   module.exports = merge(commonConfig, {
       // 环境特定配置
   });

代码拆分

SplitChunksPlugin

• 描述：SplitChunksPlugin 用于拆分代码块，将公共模块提取到单独的文件中，以减小 bundle 大小，提高加载性能。
• 使用：在 webpack.config.js 中配置 optimization.splitChunks 来实现代码拆分。

   module.exports = {
       // 配置Webpack的代码优化策略
	  optimization: {
	    // 启用了代码分割，将代码拆分成多个文件，以便更好地利用浏览器的缓存机制
	    splitChunks: {
	      // 表示所有的代码块都会被拆分
	      chunks: 'all',
	      name: false,
	      // 定义了一个大小阈值，当模块的大小超过这个值时，会被拆分成一个单独的文件
	      maxSize: 200000,
	      automaticNameDelimiter: '.',
	    },
	    // 这个选项将运行时的代码拆分成一个单独的文件，这可以确保在更新应用程序时，浏览器能够保持缓存的有效性，只需要下载更新的部分。
	    runtimeChunk: {
	      name: 'runtime',
	    },
	  },
   };

JavaScript 压缩

UglifyJsPlugin

• 描述：UglifyJsPlugin 用于压缩 JavaScript 代码，减小文件大小，提高加载速度。
• 使用：在 webpack.config.js 中配置 UglifyJsPlugin 以压缩生成的 JavaScript 文件。

   const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

   module.exports = {
       optimization: {
           minimizer: [new UglifyJsPlugin()]
       }
   };

可视化分析

BundleAnalyzerPlugin

• 描述：BundleAnalyzerPlugin 是一个可视化分析工具，用于查看构建输出的文件大小和依赖关系，帮助优化项目性能。
• 使用：在 webpack.config.js 中配置 BundleAnalyzerPlugin，并运行分析器来查看结果。

   const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

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

自动加载模块

ProvidePlugin

• 描述：ProvidePlugin 用于自动加载模块，避免手动导入模块，减少代码中的冗余。
• 使用：在 webpack.config.js 中配置 ProvidePlugin，以自动引入全局模块。

   const webpack = require('webpack');

   module.exports = {
       plugins: [
           new webpack.ProvidePlugin({
               $: 'jquery',
               jQuery: 'jquery'
           })
       ]
   };

渐进式 Web 应用（PWA）

PWA 插件（例如 workbox-webpack-plugin）

• 描述：PWA 插件用于实现渐进式 Web 应用（PWA），包括离线访问、缓存策略等功能。
• 使用：根据具体的 PWA 插件，你需要配置相应的选项，以实现离线功能和缓存策略。

   const { GenerateSW } = require('workbox-webpack-plugin');

   module.exports = {
       plugins: [
           new GenerateSW({
               // 配置选项
           })
       ]
   };