使用static-site-generator-webpack-plugin时webpack-dev-server报错求助

我看到你第一次尝试用static-site-generator-webpack-plugin搭建React服务端静态站点，启动webpack-dev-server --mode development时碰到了这个报错：

ERROR in TypeError: Cannot read property 'search' of undefined
at Object.eval (webpack:///(webpack)-dev-server/client?:31:28)
at eval (webpack:///(webpack)-dev-server/client?:248:30)
at Object../node_modules/webpack-dev-server/client/index.js?http://localhost:8081 (evalmachine.<anonymous>:276:1)
at __webpack_require__ (evalmachine.<anonymous>:30:30)
at eval (webpack:///multi_(webpack)-dev-server/client?:1:1)
at Object.0 (evalmachine.<anonymous>:377:1)
at __webpack_require__ (evalmachine.<anonymous>:30:30)
at evalmachine.<anonymous>:79:18
at evalmachine.<anonymous>:82:10
at webpackUniversalModuleDefinition (evalmachine.<anonymous>:3:20)

先梳理下你的环境和配置信息：

相关版本信息 #

• static-site-generator-webpack-plugin: ^3.4.1
• webpack-cli: ^2.1.3
• webpack: ^4.8.1
• webpack-dev-server: ^3.1.4
• node: 8.11.1

你的Webpack配置 #

/*global require, module*/
const path = require("path")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin')

module.exports = {
entry: "./src/entry.js",
output: {
filename: 'index.js',
path: path.resolve("dist"),
libraryTarget: 'umd'
},
module: {
rules: [
{ test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", "sass-loader"] }) },
{ test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] },
{ test: /\.js$/, exclude: /node_modules/, use: "babel-loader" }
]
},
plugins: [
new ExtractTextPlugin("dist/styles/main.css"),
new StaticSiteGeneratorPlugin({ paths: [ '/' ], globals: { window: {} } })
]
}

入口文件内容 #

module.exports = function render(locals) {
return '<html>Hello World</html>'
}

问题原因分析 #

这个错误的核心是：webpack-dev-server的客户端代码试图访问location.search，但你在StaticSiteGeneratorPlugin的globals配置里只提供了一个空的window对象，没有模拟location相关属性，导致代码访问未定义的location时抛出错误。另外，static-site-generator-webpack-plugin的服务端渲染逻辑和webpack-dev-server的客户端热重载逻辑在开发模式下存在冲突，需要针对性处理。

解决方案 #

我给你几个可行的解决步骤，你可以按需尝试：

1. 完善全局变量模拟
   在StaticSiteGeneratorPlugin的globals里补充location对象，至少包含search属性，让webpack-dev-server的客户端代码能正常访问：

new StaticSiteGeneratorPlugin({
  paths: [ '/' ],
  globals: {
    window: {
      location: {
        search: ''
      }
    }
  }
})

2. 区分开发与生产环境配置
   因为webpack-dev-server主要用于开发时的热重载，而静态站点生成更多是生产构建的需求，建议通过环境变量判断，在开发模式下禁用StaticSiteGeneratorPlugin，避免冲突：

plugins: [
  new ExtractTextPlugin("dist/styles/main.css"),
  // 仅在生产模式下启用静态站点生成插件
  ...(process.env.NODE_ENV === 'production' ? [
    new StaticSiteGeneratorPlugin({
      paths: [ '/' ],
      globals: {
        window: {
          location: {
            search: ''
          }
        }
      }
    })
  ] : [])
]

修改开发启动命令：

• macOS/Linux：NODE_ENV=development webpack-dev-server --mode development
• Windows：set NODE_ENV=development && webpack-dev-server --mode development

3. 调整入口文件的HTML格式
   你的入口文件里原来的<和>应该替换成普通的<和>，否则生成的HTML会是转义后的字符，无法正常解析。

4. 版本兼容性检查
   你使用的static-site-generator-webpack-plugin 3.x版本对Webpack 4的支持可能存在一些适配问题，你可以尝试查看插件的更新日志，考虑升级到最新兼容版本（如果有的话）。

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