Javascript ReferenceError:在Webpack中使用ExtractTextPlugin时未定义窗口

我正在使用

Webpack

构建我们的项目，使用

ExtractTextPlugin

插件将CSS分离到单独的文件中。除了一个属于第三方库的-vendor.CSS文件外，它适用于项目中的大多数CSS/LESS/SASS文件。一旦我将此文件包含到我的项目中，我就会收到引用错误：未定义窗口错误消息。如果我不使用

ExtractTextPlugin

则不会出现错误消息

我的webpack.config.jsLESS配置的一部分如下（完整文件如下所示）：

完整的错误消息输出为

下面是我导入此特定

LESS

文件的工作流程： 需要styles.js文件，需要vendor.less文件，需要来自Bower目录中第三方库的CSS

styles.js：

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

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

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'
},

供应商。减去：

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

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

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'
},

---

arena.css包含编译的css。

我能够解决这个问题。问题出在

webpack.config.js

文件中，我在

alias

部分中引用了“jquery”：

webpack.config.js：

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

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

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'
},

---

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

我也遇到了这个问题。我没有使用jquery，但其他一些软件包使用了

window

，它让Jasmine呕吐。我无法修改包，因此我定义了窗口

在文件

jasmine.json

中

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

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

global.window = {};

在文件

helper.js

中

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

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

global.window = {};

---

现在问题已经解决。

可能重复：？？你尝试过这个解决方案吗？是的，我将

样式加载器

作为一个单独的参数传递到

ExtractTextPlugin

中，它可以很好地处理项目中其他较少的文件