html-webpack-plugin2.22.0、Webpack與gulp結合時出現ReferenceError: window is not defined錯誤的解決辦法

一、問題描述

下面是在指令行給出的錯誤提示：

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

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

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

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

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

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

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

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

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

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

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

           

下面是各個配置檔案的内容。

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 //
 */

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存在這個問題。