在 Docker 中构建时未构建供应商包

Question

我正在使用

webpack-dev-server

在 Docker 中进行本地开发。当我在本地运行服务器时，一切都按预期工作。当我在 Docker 中运行它时，

vendor.js

未构建。

我有这些版本的 webpack devDependency：

  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.23.9",
    "babel-loader": "^8.0.4",
    "bootstrap-loader": "^3.0.2",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "html-loader": "^1.3.2",
    "imports-loader": "^0.8.0",
    "jquery": "^2.1.4",
    "mini-css-extract-plugin": "^0.4.5",
    "ngtemplate-loader": "^2.0.1",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "resolve-url-loader": "^3.0.0",
    "sass-loader": "^10.5.2",
    "script-loader": "^0.7.2",
    "style-loader": "^0.23.1",
    "terser-webpack-plugin": "^1.3.0",
    "url-loader": "^1.1.2",
    "webpack": "^4.47.0",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.15.1"
  },

这是

webpack.config.js

的相关部分：

  devServer: {
    host: "0.0.0.0",
    port: "3000",
    allowedHosts: "all",
    hot: true
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    publicPath: "/dist/",
  },
  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all",
          minChunks: 2,
        },
        internal: {
          test: /[\\/]src[\\/]/,
          name: "internal",
          chunks: "all",
          minChunks: 2,
        },
      },
    },

当我运行

npx webpack serve

时，它会正确构建所有包：

Hash: 31c83709e94fe45d4590
Version: webpack 4.47.0
Time: 15060ms
Built at: 02/21/2024 9:44:25 AM
                                         Asset       Size  Chunks                          Chunk Names
                                         0.css    5.9 KiB       0  [emitted]               vendor
                                         1.css     68 KiB       1  [emitted]               internal
                              adminservices.js   32.2 KiB       2  [emitted]               adminservices
                          adminservices.js.map   72.9 KiB       2  [emitted] [dev]         adminservices
                                  apiconfig.js   54.1 KiB       3  [emitted]               apiconfig
                              apiconfig.js.map    125 KiB       3  [emitted] [dev]         apiconfig
                                   config2.css   4.39 KiB       4  [emitted]               config2
                                    config2.js   83.5 KiB       4  [emitted]               config2
                                config2.js.map    183 KiB       4  [emitted] [dev]         config2
...
                                   internal.js    842 KiB       1  [emitted]        [big]  internal
                               internal.js.map   2.07 MiB       1  [emitted] [dev]         internal
...
                                     vendor.js    2.7 MiB       0  [emitted]        [big]  vendor
                                 vendor.js.map   7.71 MiB       0  [emitted] [dev]         vendor

现在我想在 Docker 中运行开发服务器，这样我就可以添加更多资源。我使用这个简单的 Dockerfile：

FROM node:16.20

WORKDIR /usr/src/app

COPY package.json .
COPY yarn.lock .
RUN git config --global url."https://".insteadOf git://
COPY webpack.config.js .
RUN yarn

COPY src src/

EXPOSE 3000
CMD npx webpack serve

当我构建并运行 Docker 容器时，没有任何迹象

vendor.js

:

Hash: 92826512d67ed557c04d
Version: webpack 4.47.0
Time: 16914ms
Built at: 02/21/2024 2:41:19 PM
                                         Asset       Size  Chunks                          Chunk Names
                                         0.css   73.9 KiB       0  [emitted]               internal
                              adminservices.js   32.2 KiB       1  [emitted]               adminservices
                          adminservices.js.map   72.9 KiB       1  [emitted] [dev]         adminservices
                                  apiconfig.js     54 KiB       2  [emitted]               apiconfig
                              apiconfig.js.map    125 KiB       2  [emitted] [dev]         apiconfig
                                   config2.css   4.39 KiB       3  [emitted]               config2
                                    config2.js   83.3 KiB       3  [emitted]               config2
                                config2.js.map    182 KiB       3  [emitted] [dev]         config2
...
                                   internal.js    842 KiB       1  [emitted]        [big]  internal
                               internal.js.map   2.07 MiB       1  [emitted] [dev]         internal
...etc (no vendor.js present)

Answer 1

我可以通过将

priority

添加到缓存组定义来解决此问题：

    splitChunks: {
      cacheGroups: {
        default: false,
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all",
          minChunks: 2,
+         priority: -10,
        },
        internal: {
          test: /[\\/]src[\\/]/,
          name: "internal",
          chunks: "all",
          minChunks: 2,
+         priority: -20,
        },
      },
    }

我仍然不知道 Docker 环境有什么不同，也不知道为什么优先级计算会不同。