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

【问题标题】：ReferenceError: window is not defined when using ExtractTextPlugin in WebpackReferenceError: 在 Webpack 中使用 ExtractTextPlugin 时未定义窗口
【发布时间】：2016-02-13 00:10:53
【问题描述】：

我正在使用Webpack 构建我们的项目，并使用ExtractTextPlugin 插件将我们的CSS 分离到单独的文件中。它适用于项目中的大多数 CSS/LESS/SASS 文件，除了一个属于 3rd 方库的 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 目录中的 3rd 方库的 CSS。

styles.js：

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

vendor.less：

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

arena.css 包含已编译的 CSS。

【问题讨论】：

可能重复：stackoverflow.com/questions/28223040/… ??您是否尝试过该解决方案？
是的，我将style-loader 作为单独的参数传递给ExtractTextPlugin，它可以很好地与项目中的其他LESS 文件一起使用

标签： javascript css node.js less webpack

【解决方案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'
},

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

【讨论】：

【解决方案2】：

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

在文件jasmine.json中放这个

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

然后在文件helper.js 中放这个

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

global.window = {};

现在问题解决了。

【讨论】：