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编译我所有的源文件。我是刚学过的，webpack和vue。

Answer 1

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

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

相反，

让我们看看结果，你是否也尝试过任何其他插件而不是.也许IgnorePlugin，就像这样

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

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

Answer 2

另外，根据您的环境，请将“进口webpack”改为

const webpack = require('webpack');