Webpack 4：生成共享依赖项

Question

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

App1：

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

App2：

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

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

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

Answer 2

我使用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

Answer 3

好的，感谢@MatheusSilva和Jamie的回答，我已经能够理解问题：

• 首先，我使用MatheusSilva的代码仅生成一个文件。

• 第二，我在两个应用程序的每个文件夹中都有node_modules文件夹，尽管它们使用的是完全相同的d3版本（相同的package.json），但webpack仍在复制依赖项。我必须从每个node_modules文件夹中删除d3，并在构建所有捆绑包的根文件夹中定义和安装d3。而且，由于这个原因，webpack并没有复制d3。