ReferenceError: path is not defined

[antoniojunyor]

I'm trying to run webpack-dev-server accord the documentation, but I'm having a little problem:

webpack.config.js

'use strict';
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

const html_webpack_plugin = new HtmlWebpackPlugin({
  title: 'Webpack boilerplate',
  minify: {
    collapseWhitespace: true
  },
  hash: true,
  template: './source/index.html'
});

const extract_sass = new ExtractTextPlugin({
  filename: 'app.css',
  disable: false,
  allChunks: true
})

module.exports = {
  entry: './source/app.js',
  output: {
    path: 'build',
    filename: 'app.bundle.js'
  },
  module: {
    rules: [{
      test: /\.sass$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{
          loader: 'css-loader',
          options: {
            sourceMap: true,
            minimize: true
          }
        }, {
          loader: 'sass-loader',
          options: { sourceMap: true }
        }],
        publicPath: '/build'
      })
    }]
  },
  devServer: {
    contentBase: path.join(__dirname, 'build'),
    compress: true,
    port: 9000
  },
  devtool: 'source-map',
  plugins: [
    html_webpack_plugin,
    extract_sass
  ]
}

devServer configuration

devServer: {
  contentBase: path.join(__dirname, 'build'),
  compress: true,
  port: 9000
}

error

/Users/antoniojunior/Projects/webpack-boilerplate/webpack.config.js:46
    contentBase: path.join(__dirname, 'build'),
                 ^

ReferenceError: path is not defined
    at Object.<anonymous> (/Users/antoniojunior/Projects/webpack-boilerplate/webpack.config.js:46:18)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at requireConfig (/Users/antoniojunior/Projects/webpack-boilerplate/node_modules/webpack/bin/convert-argv.js:96:18)
    at /Users/antoniojunior/Projects/webpack-boilerplate/node_modules/webpack/bin/convert-argv.js:109:17
    at Array.forEach (native)
    at module.exports (/Users/antoniojunior/Projects/webpack-boilerplate/node_modules/webpack/bin/convert-argv.js:107:15)
    at Object.<anonymous> (/Users/antoniojunior/Projects/webpack-boilerplate/node_modules/webpack-dev-server/bin/webpack-dev-server.js:192:50)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)

webpack version: ^2.2.1
webpack-dev-server: ^2.4.1

I forgot something?

[bebraw]

You are missing the related import. Please set var path = require('path');.

[Rutvik17]

You are missing the related import. Please set var path = require('path');.

I have this code block and I am getting the error [webpack-cli] ReferenceError: path is not defined
Windows 11
Node: v18.12.1

package.json

{
  "scripts": {
    "build": "webpack -p --progress --config webpack.config.build.js",
    "development": "webpack serve --progress --config webpack.config.development.js",
    "start": "npm run development"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "mini-css-extract-plugin": "^2.7.2",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0"
  }
}

webpack.config.development.js

const path = require('path')

const { merge } = require('webpack-merge')

const config = require('./webpack.config')

module.exports = merge(config, {
    node: 'development',

    devtool: 'inline-source-map',

    devServer: {
        writeToDisk: true,
    },

    output: {
        path: path.resolve(__dirname, 'public')
    }
})

[Rutvik17]

My webpack.config.js was missing the import!

const path = require('path')

It works ❤️