我有2个应用程序，它们都使用公共依赖项（d3库）：

应用1：

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

应用2：

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

我不想复制这个依赖项并将它放在每个文件中，而是我希望Webpack生成我的2个app文件，其中包含2个app可用的依赖项的附加文件：

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'
     }
   }
}

但我得到的是每个应用程序的供应商：

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

3 回答

我对正则表达式并不是很好，但我试过了 .

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
            }
        }
     }
   }
}

回复于 2024-04-29T15:25:01+08:00

我使用webpack@4.16.2测试，按照您的指定输入所有内容 . 它似乎对我有用 .

app1 / main.js

import * as d3 from "d3";

app2 / main.js

import * as d3 from "d3";

package.json

{
  "name": "webpacktest",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "d3": "^5.5.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0"
  }
}

webpack.config.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'
     }
   }
}

跑步

yarn webpack

我明白了

yarn run v1.7.0
$ /mydir/webpacktest/node_modules/.bin/webpack
Hash: 7011417172396d73dd17
Version: webpack 4.16.2
Time: 1807ms
Built at: 2018-07-23 09:58:23
               Asset      Size  Chunks                    Chunk Names
vendors~app1~app2.js   244 KiB       0  [emitted]  [big]  vendors~app1~app2
             app1.js  1.49 KiB       1  [emitted]         app1
             app2.js  1.49 KiB       2  [emitted]         app2
Entrypoint app1 [big] = vendors~app1~app2.js app1.js
Entrypoint app2 [big] = vendors~app1~app2.js app2.js
[0] ./node_modules/d3/index.js + 505 modules 520 KiB {0} [built]
    |    506 modules
[1] ./app1/main.js 46 bytes {1} [built]
[2] ./app2/main.js 46 bytes {2} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  vendors~app1~app2.js (244 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app1 (246 KiB)
      vendors~app1~app2.js
      app1.js
  app2 (246 KiB)
      vendors~app1~app2.js
      app2.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Done in 2.60s.

使用 ./dist 内容：

app1.js
app2.js
vendors~app1~app2.js