// 定义一个对象
// 模块的路径作为key 函数为value
var __webpack_modules__ = {
  "./src/js/add.js": function (module) {
    const add = (num1, num2) => {
      return num1 + num2;
    };
    // 将我们要导出的变量放到modle中的exports对象
    module.exports = add;
  },
};
// 定义一个对象作为加载模块的缓存
var __webpack_module_cache__ = {};

// 加载模块的函数
function __webpack_require__(moduleId) {
  // 判断缓存中是否加载过
  var cachedModule = __webpack_module_cache__[moduleId];
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }
  // module和__webpack_module_cache__赋值了同一个对象
  var module = (__webpack_module_cache__[moduleId] = {
    exports: {},
  });
  // 加载执行模块
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  // 导出module.exports(add: function)
  return module.exports;
}

// 立即执行函数 开始执行代码
!(function () {
  // 调用函数 加载./src/js/add.js模块
  const add = __webpack_require__("./src/js/add.js");

  console.log(add(10, 20));
})();

export const add = (num1, num2) => {
  return num1 + num2;
};

// 定义一个对象
var __webpack_modules__ = {
  "./src/js/add.js": function (
    __unused_webpack_module,
    __webpack_exports__,
    __webpack_require__
  ) {
    __webpack_require__.r(__webpack_exports__);
    // 调用d函数给exports设置了一个代理definition
    __webpack_require__.d(__webpack_exports__, {
      add: function () {
        return add;
      },
    });
    const add = (num1, num2) => {
      return num1 + num2;
    };
  },
};
// 模块的缓存
var __webpack_module_cache__ = {};

function __webpack_require__(moduleId) {
  var cachedModule = __webpack_module_cache__[moduleId];
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }
  var module = (__webpack_module_cache__[moduleId] = {
    exports: {},
  });

  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  return module.exports;
}

!(function () {
  // __webpack_require__函数对象添加一个属性d 值为函数
  __webpack_require__.d = function (exports, definition) {
    for (var key in definition) {
      if (
        __webpack_require__.o(definition, key) &&
        !__webpack_require__.o(exports, key)
      ) {
        Object.defineProperty(exports, key, {
          enumerable: true,
          get: definition[key],
        });
      }
    }
  };
})();

!(function () {
  // __webpack_require__函数对象添加一个属性o 值为函数
  __webpack_require__.o = function (obj, prop) {
    return Object.prototype.hasOwnProperty.call(obj, prop);
  };
})();

!(function () {
  // __webpack_require__函数对象添加一个属性r 值为函数
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
    }
    Object.defineProperty(exports, "__esModule", { value: true });
  };
})();

var __webpack_exports__ = {};

// 开始加载模块
!(function () {
  // 调用r的目的是记录一个__esModule -> true
  __webpack_require__.r(__webpack_exports__);
  // _js_add_js__WEBPACK_IMPORTED_MODULE_0__ 是返回的exports
  var _js_add_js__WEBPACK_IMPORTED_MODULE_0__ =
    __webpack_require__("./src/js/add.js");

  console.log((0, _js_add_js__WEBPACK_IMPORTED_MODULE_0__.add)(10, 20));
})();

module: {
  rules: [
    {
      test: /\.js$/,
      use: "babel-loader",
    },
  ];
}

module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: "babel-loader",
        options: {
          plugins: [
            "plugin-transform-arrow-functions",
            "plugin-transform-block-scoping",
          ],
        },
      },
    },
  ];
}

module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["babel/preset-env"],
        },
      },
    },
  ];
}

module.exports = {
  presets: ["@babel/preset-env"],
};

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        // false 不使用polyfill
        // usage 代码需要哪些polyfill,就使用相关的polyfill
        // entry 根据 browserslist 目标浏览器导入所有的polyfill 需要在入口文件中导入相应的包
        useBuiltIns: "usage",
        corejs: 3, // 使用指定的corejs的版本
      },
    ],
  ],
};

import "core-js/stable";
import "regenerator-runtime/runtime";

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "entry",
        corejs: 3,
      },
    ],
    ["@babel/preset-react"],
  ],
};

{
   test: /\.ts$/,
   use: 'ts-loader'
}

const path = require("path");
module.exports = {
  mode: "development",
  entry: {
    index: "./src/index.js",
    main: "./src/main.js",
  },
  output: {
    filename: "[name].build.js",
    path: path.join(__dirname + "./build"),
  },
};

const path = require("path");
module.exports = {
  mode: "development",
  entry: {
    index: { import: "./src/index.js", dependOn: "shared" },
    main: { import: "./src/main.js", dependOn: "shared" },
    shared: ["axios"],
  },
  output: {
    filename: "[name].build.js",
    path: path.join(__dirname + "./build"),
  },
};

//index.js
btnEl.onclick = function () {
 // 使用魔法注释来指定分包的name
  import(/*webpackChunkName: "main" */ './js/main')
}

// webpack.config.js
output: {
   filename: 'js/build.js',
   path: path.resolve(__dirname, './build'),
   // 针对分包的文件进行命名 name是动态导入时起的名字
   chunkFilename: '[name]_chunk.js'
 }

module.exports = {
  // 优化配置
  optimization: {
    splitChunks: {
      // all表示对同步和异步代码都进行处理 默认是async
      chunks: "all",
      // 当大于指定大小时,会继续进行分包
      maxSize: 20000,
      // 分包不小于minSize的值 默认20kb(200000)
      minSize: 10000,
      // 至少被引入的次数，默认是1
      // 如果我们写一个2，但是引入了一次，那么不会被单独拆分
      minChunks: 2,
      // 设置生成chunkId的算法 开发模式默认为named
      // deterministic为一个确定的数字
      chunkIds: "deterministic",
      // 用于对拆分的包就行分组
      // 比如一个lodash在拆分之后，并不会立即打包，而是会等到有没有其他符合规则的包一起来打包
      cacheGroups: {
        vendors: {
          test: /node_modules/,
          filename: "[id]_[hsah:6]_vendors.js",
        },
      },
    },
  },
};

btnEl.onclick = function () {
  import(
    /*webpackChunkName: "main" */
    /*webpackPrefetch: true */
    "./js/main"
  );
};

const miniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  module: {
    rules: [
      // 处理css
      {
        test: /\.css$/,
        use: [
          // 'style-loader',
          miniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [require("postcss-preset-env")],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new miniCssExtractPlugin({
      filename: "css/[name].css",
      // 动态引入css的分包名
      chunkFilename: "css/[name]_chunk.css",
    }),
  ],
};

const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      // new TerserPlugin({
      //   // 默认值为true，表示会将注释抽取到一个单独的文件中
      //   // 在开发中，我们不希望保留这个注释时，可以设置为false
      //   extractComments: false,
      //   //设置我们的terser相关的配置
      //   terserOptions: {
      //     // 设置压缩相关的选项
      //     compress: {
      //       arguments: true,
      //       arrows: true
      //     },
      //     mangle: true, // 设置丑化相关的选项
      //     toplevel: true, // 底层变量是否进行转换
      //     keep_classnames: true, // 保留类的名称
      //     keep_fnames: true // 保留函数的名称
      //   }
      // })
      new cssMinimizerWebpackPlugin(),
    ],
  },
};

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new CssMinimizerPlugin()],
  },
};

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
   optimization: {
   // 导入时分析哪些模块被使用，哪些模块没有被使用
    usedExports：true，
    minimize: true,
    minimizer: [
     new TerserPlugin()
    ]
  }
}

const path = require("path");
const glob = require("glob");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      // 表示要检测哪些目录下的内容需要被分析，这里我们可以使用glob
      paths: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, {
        nodir: true,
      }),
      // Purgecss会将我们的html标签的样式移除掉，如果我们希望保留，可以添加一个safelist的属性
      safelist() {
        return {
          standard: ["html"],
        };
      },
    }),
  ],
};

const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};