ReferenceError: window is not defined when using ExtractTextPlugin in Webpack

Question

我正在使用 Webpack 构建我们的项目，使用 ExtractTextPlugin 插件将我们的 CSS 分成单独的文件。它适用于项目中的大多数 CSS/LESS/SASS 文件，除了属于第 3 方库的一个 vendor.css 文件。一旦我将此文件包含到我的项目中，我就会收到 ReferenceError: window is not defined 错误消息。如果我不使用 ExtractTextPlugin 则不会出现任何错误消息。

我的webpack.config.js部分LESS配置如下（完整文件为here）：

new ExtractTextPlugin(__dirname + '/Content/js/styles/styles.css'),
...
module: {
  {
    test: /\.less$/,
    loader: ExtractTextPlugin.extract(
      'style-loader',
      'css-loader!' +
      'autoprefixer-loader!' +
      'less-loader'
    )
  }
}

完整的错误消息输出为 here。

以下是我导入此特定 LESS 文件的工作流程：需要 styles.js 文件，这需要 vendor.less 文件，这需要来自 Bower 中第三方库的 CSS目录。

styles.js:

require('../../../less/vendor.less');

vendor.less:

@import (css) "~vendor-ui-bootstrap/dist/css/arena.css";

arena.css 包含已编译 CSS.

Answer 1

我能够解决这个问题。问题出在 webpack.config.js 文件中，我在 alias 部分中有 'jquery' 引用：

webpack.config.js:

new webpack.ProvidePlugin({
    '_': 'underscore',
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
}),
...
alias: {
  //'jquery': 'jquery/jquery', - no need to have as I'm using the plugin
  'jquery-bbq': 'jquery-bbq/jquery.ba-bbq',
  'jquery.cookie': 'jquery.cookie/jquery.cookie',
  'jquery.chosen': 'chosen/chosen.jquery.min',
  'jquery.colorpicker': 'jQuery-ColorPicker/colorpicker',
  'jquery.fileupload': 'blueimp-file-upload/js/jquery.fileupload',
  'jquery.scrollTo': 'jquery.scrollto/jquery.scrollTo',
  'jquery.tagsinput': 'jquery-tags-input/src/jquery.tagsinput',
  'jquery.tablednd': 'TableDnD/js/jquery.tablednd',
  'jquery.ui': 'jquery-ui/jquery-ui',
  'jquery.ui.widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget',
  'jquery.validate': 'jquery-validation/dist/jquery.validate',
  'json2': 'JSON-js/json2'
},

一旦我删除了引用，构建过程就成功了。

Answer 2

我也有这个问题。我没有使用 jquery，但其他一些包正在使用 window，它让 Jasmine 呕吐。我无法修改包，所以我定义了 window.

在文件中 jasmine.json 放这个

"helpers": [ "helper.js" ],

并在文件 helper.js 中放入此

console.log('===============================');
console.log('=====   BEGIN UNIT TEST   =====');
console.log('===============================');

global.window = {};

现在问题已解决。

ReferenceError: window is not defined when using ExtractTextPlugin in Webpack

ReferenceError: window is not defined when using ExtractTextPlugin in Webpack

javascript

css

less

node.js

webpack