wbepack的一些常见配置

1.代码分割的配置

module.exports = {
  entry: {
    main: __dirname + "/app/main.js",
    other: __dirname + "/app/two.js",
  },
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "[name].js", //打包后输出文件的文件名
    chunkFilename: '[name].js',
  },

  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: "initial",
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0 // This is example is too small to create commons chunks
        },
        vendor: {
          test: /node_modules/,
          chunks: "initial",
          name: "vendor",
          priority: 10,
          enforce: true
        }

      },
    }
  }
}

其中

1、解释说明：__dirname 是指获取当前文件在当前项目中的准确路径
2、使用方式：一般结合 node 的内置库 path.resolve 来使用，例：
const path = require("path");
 
const currentFilePath = path.resolve(__dirname, "index.js");
可以使用如下代码调试看一下：__dirname和'.'的区别

#! /usr/bin/env node
 
console.log("welcome to cli file");
 
console.log("===================================");
 
const path = require('path');
 
console.log("__dirname:", path.resolve(__dirname, 'index.js'));
 
console.log("相对路径.:",path.resolve(".", "index.js"));
 
// console.log("__filename:", __filename);

            2.chunk和bundle的关系

由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。
通常我们会弄混这两个概念，以为Chunk就是Bundle，Bundle就是我们最终输出的一个或多个打包文件。确实，大多数情况下，一个Chunk会生产一个Bundle。但有时候也不完全是一对一的关系，比如我们把 devtool配置成’source-map’。然后只有一个入口文件，也不配置代码分割：

 // webpack配置
 entry: {
    main: __dirname + "/app/main.js",
 },
 output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "[name].js", //打包后输出文件的文件名
  },
 devtool: 'source-map',

这样的配置，会产生一个Chunk，但是会产生两个bundle，如下图

总流程图：

module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：

我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。