【036】html-webpack-plugin2.22.0、Webpack与gulp结合时出现ReferenceError: window is not defined错误的解决办法

一、问题描述

下面是在命令行给出的错误提示：

[10:16:36] Starting 'webpack'...
Unhandled rejection Error in plugin 'webpack-stream'
Message:
      ReferenceError: window is not defined

  - index.html:50 Object.<anonymous>
    D:/workspaceSet/VSCodeWorkSpace/learn-vuejs/src/index.html:50:2

  - index.html:21 __webpack_require__
    D:/workspaceSet/VSCodeWorkSpace/learn-vuejs/src/index.html:21:30

  - index.html:41
    D:/workspaceSet/VSCodeWorkSpace/learn-vuejs/src/index.html:41:18

  - index.html:44
    D:/workspaceSet/VSCodeWorkSpace/learn-vuejs/src/index.html:44:10

  - index.js:225 HtmlWebpackPlugin.evaluateCompilationResult
    [learn-vuejs]/[html-webpack-plugin]/index.js:225:26

  - index.js:115
    [learn-vuejs]/[html-webpack-plugin]/index.js:115:21

  - util.js:16 tryCatcher
    [learn-vuejs]/[bluebird]/js/release/util.js:16:23

  - promise.js:504 Promise._settlePromiseFromHandler
    [learn-vuejs]/[bluebird]/js/release/promise.js:504:31

  - promise.js:561 Promise._settlePromise
    [learn-vuejs]/[bluebird]/js/release/promise.js:561:18

  - promise.js:606 Promise._settlePromise0
    [learn-vuejs]/[bluebird]/js/release/promise.js:606:10

下面是各个配置文件的内容。
gulpfile.js

/**
 * Created by mingceng on 15/12/2.
 */

'use strict';
var gulp = require('gulp');
var htmlmin = require('gulp-html-minifier');
var webpack = require('webpack');
var webpackConfig = require('./webpack.config.js');
var stream = require('webpack-stream');

gulp.task('webpack', [], function () {
    return gulp.src('src/app.js')
        .pipe(stream(webpackConfig))
        .pipe(gulp.dest('build/dev'));
});
gulp.task('default', ['webpack']);

webpack.config.js

/**
 * Created by mingceng on 15/11/16.
 */

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
    // context: path.resolve(__dirname, 'src'),
    entry: {
        app: './src/app.js',
        vendors: ['./src/lib/jynPolyfill.js', 'vue']
    },
    output: {
        path: path.resolve(__dirname, "build/dev"),
        filename: 'bundle.js'
    },
    module: {
        noParse: [],
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /(node_modules|bower_components|assets)/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015']
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            },
            {
                test: /\.html$/,
                exclude:/assets/,
                loader: "ngtemplate?relativeTo=" + (path.resolve(__dirname, './src')) + "/!html"
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&minetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url"
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url?limit=8192'
            }
        ]
    },
    resolve: {
         root: __dirname + '/src/',
        modulesDirectories: ["node_modules", "assets"],
        extensions: ['', '.js', '.es6']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
            hash: true,
            minify: {"removeComments": true, "collapseWhitespace": true}
        }),
        new webpack.DefinePlugin({'process.env.NODE_ENV': '"production"'}),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            sourceMap: false,
            mangle: false
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new ExtractTextPlugin('app.css', {allChunks: false})
    ]
};

module.exports = config;

二、解决方法

把硬盘中的index.html改成index.ejs，同时把webpack.config.js配置文件里面的index.html也改成index.ejs

// 其他的代码已忽略
plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.ejs', // html后缀改成ejs后缀。
            inject: 'body',
            hash: true,
            minify: {"removeComments": true, "collapseWhitespace": true}
        }),
]

然后就可以了，目前只有2.22.0版本的html-webpack-plugin存在这个问题。