Docker环境下运行webpack-dev-server未生成vendor.js问题求助

问题描述 #

本地执行npx webpack serve时，webpack能正常构建包括vendor.js在内的所有打包文件，但在Docker容器中运行相同命令时，vendor.js完全缺失，仅生成其他chunk文件。

开发依赖版本 #

"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关键配置 #

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

本地构建输出（正常） #

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配置 #

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)

解决办法 #

1. 强制依赖版本一致性
   本地可能存在缓存依赖，Docker中执行yarn时可能因lockfile匹配问题导致依赖缺失。修改Dockerfile中的依赖安装命令，强制使用lockfile锁定的版本：

   RUN yarn install --frozen-lockfile
   

2. 调整splitChunks的minChunks阈值
   当前vendor缓存组设置minChunks: 2，意味着只有被至少2个chunk引用的node_modules模块才会被打包进vendor.js。若Docker环境中模块引用次数未达标，可将阈值改为1：

   commons: {
     test: /[\\/]node_modules[\\/]/,
     name: "vendor",
     chunks: "all",
     minChunks: 1,
   },
   

3. 明确Webpack运行模式
   本地和Docker的Webpack运行模式可能不一致，Docker中默认可能使用production模式导致打包行为变化。在CMD中明确指定开发模式：

   CMD npx webpack serve --mode development
   

4. 清理Docker缓存
   旧缓存可能导致依赖或配置未更新，执行以下命令重新构建镜像：

   docker build --no-cache -t your-image-name .
   

内容的提问来源于stack exchange，提问作者nvioli