webpack 的神仙操作——暴露全局变量与内置插件的妙用

2023-11-28 08:05:47

引言

webpack 是一个现代 JavaScript 应用程序的构建工具。它可以将许多小的 JavaScript 模块打包成一个或多个较大的包，以便在浏览器中更有效地加载。webpack 还提供了许多高级功能，可以帮助你提高开发效率和代码质量。

在上一篇文章中，我们介绍了 webpack 的基本配置和使用。如果你还没有阅读过，建议你先阅读一下，以便更好地理解这篇文章的内容。

暴露全局变量

在 webpack 中，你可以通过 ProvidePlugin 插件来暴露全局变量。这对于那些需要在你的代码中使用全局变量的库或框架非常有用。例如，如果你想在你的代码中使用 jQuery，你可以使用以下配置：

const webpack = require('webpack');

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

这样，你就可以在你的代码中直接使用 $、jQuery 和 window.jQuery 来访问 jQuery 了。

使用内置插件

webpack 提供了许多内置插件，可以帮助你提高开发效率和代码质量。这些插件包括：

CleanWebpackPlugin ：清理构建目录中的旧文件。
CopyWebpackPlugin ：将文件从一个地方复制到另一个地方。
ExtractTextPlugin ：将 CSS 代码从 JavaScript 代码中提取出来，并生成一个单独的 CSS 文件。
HtmlWebpackPlugin ：生成 HTML 文件，并将其注入到你的构建包中。
UglifyJsPlugin ：压缩你的 JavaScript 代码。

要使用这些插件，你只需要在你的 webpack 配置文件中添加它们即可。例如，要使用 CleanWebpackPlugin，你可以使用以下配置：

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

module.exports = {
  plugins: [
    new CleanWebpackPlugin(['dist'])
  ]
};