我有 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" 
      } 

我正在努力在 SSR 上设置 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" 
  } 
} 

请您参考如下方法:

在输出 block 中添加 globalObject: 'this' 以修复此问题