Webpack 4 中使用 `webpack.ProvidePlugin`

在 Webpack 4 中使用 webpack.ProvidePlugin

webpack.ProvidePlugin 是 Webpack 4 中的一个核心插件，用于自动加载模块，无需在每个文件中显式导入它们。

基本用法

const webpack = require('webpack');

module.exports = {
  // ... 其他 webpack 配置
  plugins: [
    new webpack.ProvidePlugin({
      // 定义要自动提供的模块
    })
  ]
};

常见示例

1. 自动提供 jQuery

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'
})

2. 自动提供 Lodash

new webpack.ProvidePlugin({
  _: 'lodash'
  // 或者提供特定方法：
  // _.map: ['lodash', 'map']
})

3. 提供全局变量

new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default'], // 对于 Vue 的 ES 模块版本
  axios: 'axios'
})

4. 提供自定义路径模块

const path = require('path');

new webpack.ProvidePlugin({
  utils: path.resolve(__dirname, 'src/utils/index.js')
})

Webpack 4 特有注意事项

1. 与 CommonJS/AMD 模块的兼容性：

   • ProvidePlugin 在 Webpack 4 中主要针对 CommonJS/AMD 模块系统
   • 对于 ES 模块，可能需要额外配置

2. 与 Babel 的配合：

   // 可能需要确保 Babel 不转换模块语法
   presets: [
     ['@babel/preset-env', { modules: false }]
   ]
   

3. 性能考虑：

   • 过度使用 ProvidePlugin 可能会增加 bundle 体积
   • 无法利用 tree-shaking 优化

4. 与 Webpack 4 的模块解析配合：

   resolve: {
     alias: {
       jquery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js')
     }
   }
   

替代方案考虑

在 Webpack 4 中，对于现代前端开发，可以考虑：

1. 使用 ES6 import（推荐）：

   import $ from 'jquery';
   

2. 使用 externals（对于库开发）：

   externals: {
     jquery: 'jQuery'
   }
   

3. 结合使用：

   // 既提供全局访问，又允许显式导入
   new webpack.ProvidePlugin({
     $: 'jquery'
   })
   

Webpack 4 中的 ProvidePlugin 与 Webpack 5 用法基本相同，但在模块处理和优化方面有些差异。