Development Webpack config for "Building a JavaScript Development Environment" on Pluralsight

webpack.config.dev.js

import path from 'path';

export default {
  debug: true,
  devtool: 'inline-source-map',
  noInfo: false,
  entry: [
    path.resolve(__dirname, 'src/index')
  ],
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'src'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},
      {test: /\.css$/, loaders: ['style','css']}
    ]
  }
}

@NewHenriqueSouza thanks for the update it works fine for webpack version 4.12
My webpack dependency

"webpack": "^4.12.0",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.22.2",
"webpack-md5-hash": "0.0.6"

This is what I got for the latest packages:

    "webpack": "^4.28.3",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-hot-middleware": "^2.24.3",
    "webpack-md5-hash": "0.0.6"

webpack.config.js:

// import the path package, as we are using babel, 'require' is changed to 'import from'
import path from 'path';

// Webpack is configured by 'export'ing an object
module.exports = {
    // 'debug' was removed in webpack 2.0.0
    //debug: true,
    // 'devtool' has been set to inline-source-map, source-map ones are for higher quality
    devtool: 'inline-source-map',
    // Setting 'noInfo' to false means that Webpack will display the list of all the files that it is bundling
    // Best to set this to TRUE during PROD, as it adds a lot of noise
    // noInfo, not available for webpack 2.0.0 or higher
    //noInfo: false,

    // The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    // You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
    mode: 'development',

    // This is the entry point of the Webpack
    entry: [
        // Not doing a hot-reloading at this point and just keeping it simple to the SRC/Index
        // using __dirname, which is part of node.js, which will give the full path here.
        // also using the 'path' package, which also comes with node.js and has been imported above
        path.resolve(__dirname, 'src/index')
    ],

    // the target of the Webpack bundle for our current purpose is the web. It could also be 'node', or 'elektron' for desktop apps
    target: 'web',

    // This informs Webpack, where it should create the DEV bundle
    // Webpack in the current code does not actually create the physical files, but will serve the build from memory.
    // But while definig the output, the path and file names are specified to Webpack
    output: {
        path: path.resolve(__dirname, 'src'),
        publicPath: '/',
        filename: 'bundle.js'
    },

    // define any plug-ins, if they are to be used - hot-reloading, linting, caching, styles, etc.
    plugins: [],

    // This informs Webpack about the file types that we wish to handle
    module: {
        // 'rules' informs Webpack how to handle different file types, it is the new 'loaders'
        rules: [{
            // include .js files
            // we are asking it to handle .JS files
            test: /\.jsx?$/,
            // preload the jshint loader
            enforce: "pre",
            // exclude any and all files in the node_modules folder
            exclude: /node_modules/,
            // USe the babel loader. With webpack 2.0.0, the -loader suffix is not allowed to be omitted
            loaders: ['babel-loader']
        },
        {
            // also, it is handling the .CSS files for us.
            test: /\.css$/,
            loader: ['style','css']
        }]
    },
}

//Fixes from my side:
// "webpack": "^4.28.4",
// "webpack-dev-middleware": "^3.5.0"

---

`const path = require('path');

module.exports = {
devtool: 'inline-source-map',
entry: [
path.resolve(__dirname, 'src/index')
],
target: 'web',
output: {
path: path.resolve(__dirname, 'src'),
publicPath: '/',
filename: 'bundle.js'
},
plugins: [],
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
//loaders: ['babel']
},
{
test: /.css$/,
use: {
loader: "css"
}
}
]
}
}`

For "webpack": "^3.0.0"

import path from 'path';
import webpack from 'webpack';

export default{
  devtool: 'inline-source-map',
  entry: [
    path.resolve(__dirname, 'src/index')
  ],
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'src'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      debug: true,
      noInfo: false
    })
  ],
  module: {
    rules: [{
      test: /\.js$/,
      enforce: "pre",
      exclude: /node_modules/,
      loaders: ['babel-loader']
    },
    {
      //It's not longer allowed to omit the -loader suffix when using loaders.
      test: /\.css$/,
      loaders: ['style-loader','css-loader']
    }]
  }
}

@momoduoladapo - I deleted your comment since people need to use the versions I specify to follow along.

@momoduoladapo - I deleted your comment since people need to use the versions I specify to follow along.

So sorry about that, i am also taking the course and i have reverted to the originally specified versions you advised.

So now all i updated was my webpack.config.dev.js and the index.js in babel-loader

Cheers

@coryhouse amazing course!!! Thank you so much!!! Would it be possible to get an updated version of this for the latest version of webpack?

Hello Frankie, I would respond to your question tomorrow, I am not in a location with internet that I can use with my laptop. Apologies for any inconvenience caused!

…

-----Original Message----- From: "Frankie Bukenya" <[email protected]> Sent: ‎21/‎07/‎2019 18:14 To: "coryhouse" <[email protected]> Cc: "soji" <[email protected]>; "Comment" <[email protected]> Subject: Re: coryhouse/webpack.config.dev.js @coryhouse amazing course!!! Thank you so much!!! Would it be possible to get an updated version of this for the latest version of webpack? — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

@Frankie-B - Please post on the course discussion board on Pluralsight. I provide support there.

Please @coryhouse, sir please i am having error using this code. Can you help me detect the problem. Thanks
`
import path from 'path';

export default {
debug: true,
devtool: 'inline-source-map',
noInfo: false,
entry: [
path.resolve(__dirname, 'src/index')
],
target: 'web',
output: {
path: path.resolve(__dirname, 'src'),
publicPath: '/',
filename: 'bundle.js'
},
plugins: [],
module: {
loaders: [
{test: /.js$/, exclude: /node_modules/, loaders: ['babel']},
{test: /.css$/, loaders: ['style','css']}
]
}
}`

Please post questions on the course discussion board on Pluralsight. Include a link to your GitHub.