Webpack 4 for s-s-r，如何解决这个 ReferenceError: window is not defined？

Posted 2023-02-22

【中文标题】Webpack 4 for s-s-r，如何解决这个 ReferenceError: window is not defined？

【英文标题】：Webpack 4 for s-s-r, How to solve this ReferenceError: window is not defined?

【发布时间】：2019-03-08 04:34:31

【问题描述】：

我有 3 个 webpack.config 文件来启用 Server-Sive-Rendering。

webpack.base.js webpack.client.js webpack.server.js

构建脚本

"scripts": 
        "dev": "npm-run-all --parallel dev:*",
        "dev:bundle": "nodemon --watch build --exec \"node build/bundle.js\"",
        "dev:server": "webpack --config webpack.server.js --watch",
        "dev:client": "webpack --config webpack.client.js --watch"
      

我正在努力在 s-s-r 上设置 css。

当我尝试时：

npm run dev:client -> 可以正常运行！

npm run dev:server -> 可以正常运行！

但是， npm run dev:bundle 我收到一条错误消息。

这是我的 webpack 设置

webpack.base.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';

module.exports = 
    module: 
        rules: [
            
                test: /\.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: 
                    presets: [
                        'react',
                        'stage-0',
                        ['env',  target:  browsers: ['last 2 versions'] ]
                    ]
                
            ,
            
                test: /\.(sa|sc|c)ss$/,
                    use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            
        ]
    ,
    plugins: [
        new MiniCssExtractPlugin(
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        )
    ]
; 

webpack.client.js

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

const config = 
    mode: 'development',
    //Tell webpack the root file of our
    //server application
    entry: './src/client/client.js',
    output: 
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public')
    
;

module.exports = merge(baseConfig, config);

webpack.server.js

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const webpackNodeExternals = require('webpack-node-externals');
const config = 

    //Inform webpack that we're building a bundle
    //for nodeJS, rather than for the browser
    mode: 'development',
    target: 'node',
    entry: './src/index.js',

    output: 
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    ,

    externals: [webpackNodeExternals()]
;

module.exports = merge(baseConfig, config);

package.json

  "name": "shawnbaek.com",
  "version": "1.0.0",
  "description": "Server-Side-Rendering Wordpress Site",
  "main": "index.js",
  "scripts": 
    "dev": "npm-run-all --parallel dev:*",
    "dev:bundle": "nodemon --watch build --exec \"node build/bundle.js\"",
    "dev:server": "webpack --config webpack.server.js --watch",
    "dev:client": "webpack --config webpack.client.js --watch"
  ,
  "repository": 
    "type": "git",
    "url": "git+https://github.com/ShawnBaek/shawnbaek.com.git"
  ,
  "keywords": [
    "wordpress"
  ],
  "author": "Shawn Baek",
  "license": "ISC",
  "bugs": 
    "url": "https://github.com/ShawnBaek/shawnbaek.com/issues"
  ,
  "homepage": "https://github.com/ShawnBaek/shawnbaek.com#readme",
  "dependencies": 
    "autoprefixer": "^9.1.5",
    "axios": "^0.18.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "compression": "^1.7.2",
    "concurrently": "^3.5.1",
    "css-loader": "^1.0.0",
    "express": "^4.16.3",
    "express-http-proxy": "^1.2.0",
    "html-webpack-plugin": "^3.2.0",
    "lodash": "^4.17.10",
    "mini-css-extract-plugin": "^0.4.3",
    "node-sass": "^4.9.3",
    "nodemon": "^1.17.4",
    "npm-run-all": "^4.1.2",
    "postcss": "^7.0.2",
    "postcss-loader": "^3.0.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-helmet": "^5.2.0",
    "react-redux": "^5.0.7",
    "react-router-config": "^1.0.0-beta.4",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0",
    "redux-thunk": "^2.2.0",
    "sass-loader": "^7.1.0",
    "serialize-javascript": "^1.5.0",
    "style-loader": "^0.23.0",
    "tailwindcss": "^0.6.6",
    "webpack": "^4.7.0",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.2",
    "webpack-node-externals": "^1.7.2"
  ,
  "devDependencies": 
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "webpack-cli": "^2.1.2"
  

【问题讨论】：

How can I use style-loader in react s-s-r (Server Side Rendering)?的可能重复

@shawn-baek，你有没有在任何地方使用 webpack 配置来完成这项工作？我正在为在 s-s-r 中使用 AudioContext 进行类似的事情而苦苦挣扎，这需要 window 对象可用。

【参考方案1】：

在输出块中添加globalObject: 'this' 以解决此问题