webpack-dev-server v4 -window 未定义

问题描述

您好，我升级到了以下版本的 Webpack 5：

  // package.json
  "webpack": "^5.11.1","webpack-cli": "^4.3.1","webpack-dev-server": "^4.0.0-beta.0",

我使用以下配置通过 webpack-dev-server -d source-map --mode=development 启动开发服务器：

// webpack.config.json
{
      entry,output: {
         filename: '[name].[fullhash].js',path: path.resolve(__dirname,'build'),publicPath: '/',},resolve: {
         extensions: [
            '.js','.jsx','.ts','.tsx',],alias,context: path.resolve(__dirname,'src'),devServer: {
         static: path.resolve(__dirname,public: 'localhost:3000',open: true,historyApiFallback: true,port: 3000,proxy: {
            '^/': 'http://localhost:3000'
         },plugins: [
         new WebpackDotenv(),new HtmlWebpackPlugin({
            template: 'index.html',collapseWhitespace: true,removeComments: true,}),new MiniCssExtractPlugin({
            filename: 'styles.css',new SVGSpritemapPlugin(
            '/assets/icons',{
               output: {
                  filename: 'spritemap.svg',}
            }
         ),stats: {
         assets: true,assetsSort: 'size',all: false,errors: true,colors: true,performance: true,timings: true,optimization: {
         minimizer: [
            new OptimizeCSSAssetsPlugin({}),new TerserPlugin({
               // Use multi-process parallel running to improve the build speed
               // Default number of concurrent runs: os.cpus().length - 1
               parallel: true,// Enable file caching
               extractComments: false,new UglifyJsPlugin({
               uglifyOptions: {
                  output: {
                     comments: false,}
               }
            }),module: {
         rules: [
            {
               test: /\.ts(x?)$/,exclude: /node_modules/,use: {
                  loader: 'swc-loader',options: {
                     sync: true
                  }
               },{
               // Todo: somehow the sourcemap is not being generated properly
               test: /\.s(a|c)ss$/,use: [
                  {
                     loader: 'style-loader',{
                     loader: 'css-loader',options: {
                        sourceMap: true,}
                  },{ loader: 'resolve-url-loader' },{
                     loader: 'postcss-loader',options: {
                        postcssOptions: {
                           plugins: [
                              require('autoprefixer'),{
                     loader: 'sass-loader',}
               ],{
               test: /\.css$/,use: [
                  MiniCssExtractPlugin.loader,'css-loader',{
               test: /\.(ttf|eot|woff|woff2)$/,use: {
                  loader: 'file-loader',options: {
                     name: '[name].[ext]',outputPath: 'fonts/',publicPath: '/fonts',esModule: false,{
               test: /\.(gif|png|jpe?g|svg)$/i,use: [
                  {
                     loader: 'file-loader',options: {
                        name: '[name].[ext]',outputPath: 'images/',publicPath: '/images',}
                  }
               ],devtool: 'source-map',}

一切正常，只是我收到以下错误：

// browser console
Uncaught ReferenceError: window is not defined
    at Object.../node_modules/webpack-dev-server/client/default/index.js

相关文件可以在 here 中找到。一切似乎都运行良好，即使出现错误。但是在开发时保留这个错误感觉很糟糕。

有关如何消除此错误并向 webpack 开发服务器提供 window 对象的任何建议？

解决方法

如果您可以修补 index.ts 并将所有窗口调用替换为：

(() => {
    if (typeof self !== 'undefined') {
        return self;
    } else if (typeof window !== 'undefined') {
        return window;
    } else if (typeof global !== 'undefined') {
        return global;
    } else {
        return Function('return this')();
    }
})()

那么这应该可行。

,

这里的问题是，在我的 entry 变量中，我得到了两件事。一个是应用程序本身，另一个是它的 service-worker。后来结合开发模式是导致错误的原因。所以我现在只是在注册 process.env.NODE_ENV !== 'development' 之前检查 service-worker。

不是真正的解决方案，但足以满足我的用例。