webpack 定义插件失败答案

【问题标题】：webpack definePlugin failedwebpack 定义插件失败
【发布时间】：2018-09-14 15:44:49
【问题描述】：

我尝试使用 Webpack 为我的 Vue 项目设置环境变量，但 DefinePlugin 不起作用，它一直给我 TypeError: Cannot read property 'compilation' of undefined。这是 webpack.config.js。

import webpack from 'webpack'; 

module.exports = {
    entry: {
        main: './app'
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: {loader: 'html-loader'}
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV' : JSON.stringify('production')
        })
    ]
};

错误是：

TypeError: Cannot read property 'compilation' of undefined
at DefinePlugin.apply (/Users/david/Documents/black-tux-cms/node_modules/webpack/lib/DefinePlugin.js:42:18)
at Compiler.apply (/Users/david/Documents/black-tux-cms/node_modules/webpack-stream/node_modules/tapable/lib/Tapable.js:375:16)
at webpack (/Users/david/Documents/black-tux-cms/node_modules/webpack-stream/node_modules/webpack/lib/webpack.js:33:19)
at Stream.<anonymous> (/Users/david/Documents/black-tux-cms/node_modules/webpack-stream/index.js:134:20)
at _end (/Users/david/Documents/black-tux-cms/node_modules/through/index.js:65:9)
at Stream.stream.end (/Users/david/Documents/black-tux-cms/node_modules/through/index.js:74:5)
at module.exports (/Users/david/Documents/black-tux-cms/node_modules/webpack-stream/index.js:214:12)
at Gulp.<anonymous> (/Users/david/Documents/black-tux-cms/gulp/tasks/scripts.js:8:15)
at module.exports (/Users/david/Documents/black-tux-cms/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/david/Documents/black-tux-cms/node_modules/orchestrator/index.js:273:3)

我正在使用 gulp 来编译我所有的源文件。我是 gulp、webpack 和 vue 的新手。

【问题讨论】：

你使用什么 webpack 版本？发布你的 package.json
你可以试试const webpack = require('webpack');而不是import。

标签： webpack vue.js gulp

【解决方案1】：

还取决于您的环境，将 'import webpack ... 替换为

const webpack = require('webpack');

【讨论】：

【解决方案2】：

根据您使用的 webpack 版本，您的配置可能会有所不同，请尝试

new webpack.DefinePlugin(
{ 
    PRODUCTION: JSON.stringify(true) 
}
);

改为

让我们看看结果，你是否也尝试过any other plugins...也许是 IgnorePlugin，像这样

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

它编译时没有错误吗？可能是您混淆了版本：D

【讨论】：