Webpack 4:生成共享依赖关系

Question

我有两个应用程序，它们都使用一个公共依赖项( d3库)：

App1：

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

App2：

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

我不想复制这个依赖项，并将其包含在每个文件中，相反，我希望Webpack生成我的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
• 供应商~app1.js
• 供应商~app2.js

Answer 1

好吧，感谢@MatheusSilva的回答和杰米的回答，我已经理解了这个问题：

• 首先，我使用了MatheusSilva的代码来生成一个文件。
• 其次，我在两个应用程序的每个文件夹中都有node_modules文件夹，尽管它们使用的是完全相同版本的d3 (相同的package.json)，webpack仍然在复制依赖关系。我不得不从每个d3文件夹中删除node_modules，并在根文件夹中定义和安装d3，在这里构建所有的包。多亏了这一点，webpack没有复制d3。

Answer 2

我只是不太擅长regex，但我试过了。

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 3

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