ReferenceError: webpack is not defined

Question

In my webpack app I have a basic build process that's triggered by "npm run build" which executes the webpack binary and copies my index.html in /app to /dist. Whenever I run npm run build I get ReferenceError: webpack is not defined but when I run npm start, which starts the webpack-dev-server, everything's fine.

This is my webpack config file:

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

var config = {
    context: __dirname + '/app',
    entry: './index.js',
    output: {
        path: __dirname + '/app',
        filename: 'app.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
            { test: /\.html$/, loader: 'raw', exclude: /node_modules/ },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css!sass'), exclude: /node_modules/}
        ]
    },
    plugins: [
        new ExtractTextPlugin('app.css')
    ]
};

if (process.env.NODE_ENV == 'production') {
    config.output.path = __dirname + '/dist';
    config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = config;

Answer 1

You are missing

var webpack = require('webpack');

at the beginning of your file. If you want to optimize execution a bit, you can push it inside that if block of yours.

Answer 2

i have the same error in my vue.Js project i remove this lines from vue.config.js and it solve the probleme :

configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        // Vue CLI is in maintenance mode, and probably won't merge my PR to fix this in their tooling
        // https://github.com/vuejs/vue-cli/pull/7443
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
      })
    ],
  },