Webpack

魔术注释（Magic Comment）

Webpack 提供了一种特殊的魔术注释（Magic Comment）功能，允许开发者为动态导入的模块指定特定的名字，以方便 Webpack 在编译过程中进行优化和分割。
这种魔术注释的形式是在 import 语句中添加下面这样的注释，其中 `chunk-name` 是要给模块指定的名字。

/* webpackChunkName: chunk-name */

例如：

import(/* webpackChunkName: "vendors" */ './vendors.js');

这段代码会告诉 Webpack 把从 `./vendors.js` 导入的模块命名为 `vendors`，并在生成最终的输出文件时按照这个名字来进行分割和合并。
注意，如果在多个不同的地方都导入了同一个模块，并且为它提供了不同的名字，那么 Webpack 将会选择一个最常见的名字作为最终的输出文件名。如果没有任何名字是最常见的，则 Webpack 将使用默认的命名规则。
此外，除了 `webpackChunkName`，Webpack 还支持其他的魔术注释，比如 `webpackPrefetch` 和 `webpackPreload`，分别用于标记一个模块是否应该被预加载或预读取。

插件

CommonsChunkPlugin

CommonsChunkPlugin 是 Webpack 的一个插件，它可以将多个入口点之间的共享代码拆分出来，形成一个单独的共享代码块（也称为 common chunk 或 manifest chunk）。这样做的好处是可以减少网络请求的数量，提高网页的加载速度。
使用 CommonsChunkPlugin 的基本步骤如下：

  1. 安装插件

首先，需要安装 CommonsChunkPlugin 插件，可以通过 npm 或 yarn 来完成安装。例如：

npm install --save-dev webpack-merge

 2. 配置插件

接下来，在 Webpack 配置文件中添加 CommonsChunkPlugin 插件的配置信息。下面是一个简单的示例：

const path = require('path');
 
module.exports = {
  entry: {
    app: './src/app.js',
    vendor: ['lodash', 'react']
  },
  output: {
    filename: '[name].[chunkhash].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    })
  ]
};

在这个示例中，我们有两个入口点 `app` 和 `vendor`。`vendor` 入口点包含了一些外部库，如 lodash 和 react。我们在优化部分设置了 splitChunks 参数，并指定了一个 cacheGroups，要求 Webpack 将所有依赖于 node_modules 的模块提取出来放到 vendor 编译出来的文件中。同时在 plugins 部分使用了 CommonsChunkPlugin 将所有 entry 点的公用代码提取出来放入名为 'manifest' 的 js 文件中。

  3. 执行 Webpack

最后，运行 Webpack 编译命令即可生成拆分后的代码块。在上面的示例中，将会生成三个输出文件：app.[chunkhash].bundle.js、vendor.[chunkhash].bundle.js 和 manifest.[chunkhash].bundle.js。