Webpack 5.74.0 Dev Server编译正常但无法提供文件服务求助

问题描述 #

将Webpack版本升级至5后，开发环境中出现文件无法正常提供服务的问题。运行webpack serve后控制台输出编译成功日志，但访问http://localhost:8080/assets/bundle/bundle.js时返回GET http://localhost:8080/assets/bundle/bundle.js [HTTP/1.1 404 Not Found 2ms]错误，甚至/webpack-dev-server端点显示的文件链接点击后也返回404。

编译日志 #

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.2.160:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/PATH/public/' directory
<i> [webpack-dev-middleware] wait until bundle finished
asset bundle.js 1.98 MiB [emitted] [minimized] [big] (name: main) 2 related assets
orphan modules 16.2 MiB [orphan] 2469 modules
runtime modules 27.8 KiB 15 modules
cacheable modules 5.38 MiB
  modules by path ./node_modules/ 1.83 MiB 419 modules
  asset modules 32.8 KiB
    data:image/svg+xml,%3Csvg width=%27.. 2.39 KiB [built] [code generated]
    data:image/svg+xml,%3Csvg xmlns=%27.. 342 bytes [built] [code generated]
    + 29 modules
  modules by path ./src/ 3.52 MiB 15 modules
  optional modules 30 bytes [optional]
    crypto (ignored) 15 bytes [optional] [built] [code generated]
    crypto (ignored) 15 bytes [optional] [built] [code generated]

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/configuration/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  bundle.js (1.98 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (1.98 MiB)
      bundle.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/

webpack 5.74.0 compiled with 4 warnings in 22225 ms

Webpack 配置 #

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public/assets/bundle/'),
        publicPath: "assets/bundle/",
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.jsx', '.js', '.mjs', '.gql']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.mjs$/,
                include: /node_modules/,
                type: 'javascript/auto'
            },
            {
                test: /\.(scss|css)$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    devtool: 'source-map',
    devServer: {
        static: {
          directory: path.join(__dirname, 'public/'),
        },
    }
};

package.json 内容 #

{
  "name": "NAME",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode=development",
    "build": "webpack --mode=production",
    "dev-server": "webpack serve"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@gitlab.com/URL.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://gitlab.com/URL/issues"
  },
  "homepage": "https://gitlab.com/URL",
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.3",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "sass": "^1.55.0",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "@aws-amplify/api": "^4.0.54",
    "@aws-amplify/auth": "^4.6.7",
    "@aws-amplify/ui-react": "^3.5.4",
    "@sendgrid/mail": "^7.7.0",
    "@stripe/react-stripe-js": "^1.12.0",
    "@stripe/stripe-js": "^1.38.1",
    "aws-amplify": "^4.3.36",
    "bootstrap": "^5.2.1",
    "css-modal": "^1.5.0",
    "history": "^5.3.0",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "prop-types": "^15.8.1",
    "query-string": "^7.1.1",
    "querystring": "^0.2.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
    "react-dom": "^18.2.0",
    "react-dropdown": "^1.11.0",
    "react-loader-spinner": "^5.3.4",
    "react-router-dom": "^6.4.2-pre.0",
    "reactstrap": "^9.1.4",
    "sort-by": "^1.2.0"
  }
}

解决方案 #

1. 修正 output.publicPath 路径 #

Webpack 5中，开发环境下publicPath需要使用绝对路径开头，否则会导致资源路径解析错误。修改配置：

output: {
    path: path.join(__dirname, 'public/assets/bundle/'),
    publicPath: "/assets/bundle/", // 添加开头的斜杠
    filename: 'bundle.js'
},

2. 补充 devServer 的 devMiddleware 配置 #

确保devServer明确资源的公共路径，避免和static目录的路径冲突：

devServer: {
    static: {
        directory: path.join(__dirname, 'public/'),
    },
    devMiddleware: {
        publicPath: "/assets/bundle/" // 和output.publicPath保持一致
    }
}

3. 设置开发环境的 mode #

控制台警告mode未设置，建议在dev-server脚本中指定开发模式，提升编译效率并消除警告。修改package.json的scripts：

"dev-server": "webpack serve --mode=development"

4. 验证资源路径 #

修改完成后重启webpack serve，访问http://localhost:8080/assets/bundle/bundle.js即可正常获取文件。同时确保HTML中引用bundle的路径为绝对路径：/assets/bundle/bundle.js。

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