ProvidePlugin

ProvidePlugin 自动加载模块，而不是在任何地方都必须import或require它们。 ProvidePlugin相当于自动添加了一句import或者require的语句，所以只能在模块内使用，并不是为全局添加。

语法

---

引用整个模块

new webpack.ProvidePlugin({
  identifier: 'module1',
  // ...
});

引用模块成员

new webpack.ProvidePlugin({
  identifier: ['module1', 'property1'],
  // ...
});

引用自定义模块

const path = require('path');

new webpack.ProvidePlugin({
  identifier: path.resolve(path.join(__dirname, 'src/module1')),
  // ...
});

场景

---

引用 lodash

• 引用整个lodash模块

  • webpack.config.js 配置 ProvidePlugin

  plugins: [
    new HtmlWebpackPlugin({
      template: Path.resolve(process.cwd(), "./public/index.html"),
    }),
    new webpack.DefinePlugin({
      env: JSON.stringify(process.env.NODE_ENV),
    }),
    new webpack.ProvidePlugin({
      lodash:'lodash'
    })
  ],

  • 入口文件无需引入 lodash ,直接使用 lodash

    function foo(a, b, c) {
      return a + b + c;
    }
    
    const curryFoo = lodash.curry(foo);
    console.log(curryFoo(1, 2)(3));
    console.log(curryFoo(1, 2, 3));

• 引用lodash中的curry函数`

  • webpack.config.js 配置 ProvidePlugin

    plugins: [
      new HtmlWebpackPlugin({
        template: Path.resolve(process.cwd(), "./public/index.html"),
      }),
      new webpack.DefinePlugin({
        env: JSON.stringify(process.env.NODE_ENV),
      }),
      new webpack.ProvidePlugin({
        curry:['lodash','curry']
      })
    ],

  • 入口文件无需引入 lodash 中的 curry 函数 ,直接使用 curry 函数

    function foo(a, b, c) {
      return a + b + c;
    }
    
    const curryFoo = curry(foo);
    console.log(curryFoo(1, 2)(3));
    console.log(curryFoo(1, 2, 3));