webpack definePlugin 失败

Question

我尝试使用 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 的新手。

Answer 1

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

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

代替

让我们看看结果，你有没有试过any other plugins相反......也许是 IgnorePlugin ，像这样

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

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