webpack 内置插件

所有的 webpack 内置插件都作为 webpack 的静态属性存在的，使用下面的方式即可创建一个插件对象

const webpack = require("webpack");

new webpack.插件名(options);

DefinePlugin

全局常量定义插件，一般用于公司中定义的一些需要全局使用的东西。

使用该插件通常定义一些常量值，例如：

//写在plugins配置项中
new webpack.DefinePlugin({
  PI: `Math.PI`, // PI = Math.PI
  VERSION: `"1.0.0"`, // VERSION = "1.0.0"
  DOMAIN: JSON.stringify("duyi.com"),
});

这样一来，在源码中，我们可以直接使用插件中提供的常量，当 webpack 编译完成后，会自动替换为常量的值

例子

webpack.config.js

const webpack = require("webpack");

module.exports = {
  mode: "development",
  devtool: "source-map",

  plugins: [
    /**定义全局常量
     * 定义好之后可以在代码中使用,在AST抽象语法树分析的时候，会将这些替换。
     * 字符串的键就是常量名，字符串的值就是常量值。(不是字符串本身哦)
     */
    new webpack.DefinePlugin({
      PI: `Math.PI`, //const PI=Math.PI
      VERSION: `'v1.1.0'`, //const VERSION='v1.1.0'
      AUTHOR: JSON.stringify("Yan"),
    }),
  ],
};

index.js

console.log(PI);
console.log(VERSION);
console.log(AUTHOR);

//编译后
console.log(Math.PI);
console.log("v1.1.0");
console.log("Yan");

BannerPlugin

它可以为每个 chunk 生成的文件头部添加一行注释，一般用于添加作者、公司、版权等信息。

new webpack.BannerPlugin({
  banner: `
  hash:[hash]
  chunkhash:[chunkhash]
  name:[name]
  author:yuanjin
  corporation:duyi
  `,
});

例子

webpack.config.js

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

module.exports = {
  mode: "development",
  devtool: "source-map",

  plugins: [
    /**给每个chunk加上横幅 */
    new webpack.BannerPlugin({
      banner: `
  hash:[hash]
  chunkhash:[chunkhash]
  name:[name]
  author:yuanjin
  corporation:duyi
  `,
    }),
    new CleanWebpackPlugin(),
  ],
};

编译后的 main.js

/*!
 *
 *   hash:02edab8cc09531612656
 *   chunkhash:1aeb31f1b555a617e8ef
 *   name:main
 *   author:yuanjin
 *   corporation:duyi
 *
 */
xxxxxx;
xxx;

ProvidePlugin

自动加载模块，而不必到处 import 或 require

new webpack.ProvidePlugin({
  $: "jquery",
  _: "lodash",
});

然后在我们任意源码中：

$("#item"); // <= 起作用
_.drop([1, 2, 3], 2); // <= 起作用 将数组中的前两个丢掉

例子

const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  //
  plugins: [
    /**自动加载，不必再经常的使用import和require了 */
    new webpack.ProvidePlugin({
      $: "jquery",
      _: "lodash",
    }),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(),
  ],
};

index.js

//不引入的使用jquery
$("<div>").text("你好").appendTo("body");

//使用lodash
console.log(_.cloneDeep({ a: 1, b: 2 }));

编译后的结果 main.js

    "./src/index.js": function (module, exports, __webpack_require__) {
      (function ($, _) {
        //不引入的使用jquery
        $("<div>").text("你好").appendTo("body");

        //使用lodash
        console.log(_.cloneDeep({ a: 1, b: 2 }));
      }).call(
        this,
        __webpack_require__(
          /*! jquery */ "./node_modules/.pnpm/jquery@3.7.1/node_modules/jquery/dist/jquery.js"
        ),
        __webpack_require__(
          /*! lodash */ "./node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/lodash.js"
        )
      );
    },

编译结果分析

/*我们最开始期待的index.js模块打包之后的样子*/
        {
            "index.js":function(module, exports, __webpack_require__){
               // xxx
            }
        }
/*实际上打包出的模板
在index.js的内部又建立了一个自执行函数,然后使用call方法将jquery和lodash传入
这样很巧妙的避免了全局变量的污染
*/
{
    "index.js":function(module, exports, __webpack_require__){
        (function($, _){
            //xxxindex.js的代码
        }).call(this,__webpack_require__("jquery"),__webpack_require__("lodash"))
    }
}

webpack 内置插件 ​

DefinePlugin ​

BannerPlugin ​

ProvidePlugin ​

webpack 内置插件

DefinePlugin

BannerPlugin

ProvidePlugin