javascript - 网络包 4 : generating a shared dependency

Question

我有 2 个应用程序，它们都使用共同的依赖项(d3 库):

应用程序1:

// app1.js
import * as d3 from "d3";

应用程序2:

//app2.js
import * as d3 from "d3";

我不想复制此依赖项并将其放在每个文件中，而是希望 Webpack 生成我的 2 个应用程序文件，并为 2 个应用程序使用的依赖项添加一个附加文件:

• app1.js
• app2.js
• d3.js

这是我到目前为止所做的:

const path = require('path');

module.exports = {
  entry: {
      app1:'./app1/main.js',
      app2: './app2/main.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
     splitChunks: {
       chunks: 'all'
     }
   }
}

但我得到的是每个应用程序的 vendor :

• app1.js
• app2.js
• vendor ~app1.js
• vendor ~app2.js

Answer 1

我只是不太擅长正则表达式，但我尝试过。

module.exports = {
  entry: {
      app1:'./app1/main.js',
      app2: './app2/main.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
     splitChunks: {
        cacheGroups: {
            vendor: {
                test: /node_modules/,
                name: 'vendor',
                chunks: "all",
                priority: -10
            }
        }
     }
   }
}