Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Development Webpack config for "Building a JavaScript Development Environment" on Pluralsight
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']}
]
}
}
@brinka
Copy link

brinka commented Sep 3, 2017

Hi Cory, can you please kindly rewrite it, so that it works with "webpack": "^3.5.5"?

@brinka
Copy link

brinka commented Sep 4, 2017

Would that be a valid replacement? Thank you.

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

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$/, exclude: /node_modules/, loaders: ['babel']},
      {test: /\.css$/, loaders: ['style','css']}
    ]
  }
}

@nastanford
Copy link

nastanford commented Sep 4, 2017

Brinka even with your changes it is still throwing an error for me. I can't see where I have mistyped anything.

Cory When you can check and see what is wrong and tell us what to change.

@nastanford
Copy link

nastanford commented Sep 4, 2017

Here is my error before trying Brinka's change.
image

@nastanford
Copy link

nastanford commented Sep 4, 2017

This is the error I get after trying Brinka's suggested change.
image

@nastanford
Copy link

nastanford commented Sep 4, 2017

Oh and here is my fork version with the error in it.

https://github.com/nastanford/pluralsight-js-dev-env.git

@brinka
Copy link

brinka commented Sep 4, 2017

You probably don't have to incorporate my changes at all, because I use webpack@3.5.5 and you are using:

    "webpack": "1.13.2",
    "webpack-dev-middleware": "1.8.4",
    "webpack-hot-middleware": "2.13.0",

You might want to use versions, that Cory is using: https://gist.github.com/coryhouse/29bd1029b623beb4c7f79b748dcba844 (if you want to use webpack 3 I have also posted there current versions of dependencies), or just try webpack 3 with the code I posted above, it seems to work for me so far.

@AlexSerbanG
Copy link

AlexSerbanG commented Sep 20, 2017

@brinka, your version works with webpack 3.6.0, surely. Thanks for the update.

@mrsan22
Copy link

mrsan22 commented Oct 10, 2017

For webpack 3.6: Sample webpack.config.dev.js

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

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$/, exclude: /node_modules/, loaders: ['babel-loader']},
      {test: /\.css$/, loaders: ['style-loader','css-loader']}
    ]
  }
}

@nhamar
Copy link

nhamar commented Jul 3, 2018

Thanks @mrsan22 - Worked for me. FYI, current version of webpack is 4.12

@CapitaoFantastico
Copy link

CapitaoFantastico commented Jul 22, 2018

If you had problems to debug source-map using web-pack 4. Just set mode: 'development', in "webpack.config.dev.js"

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

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

@mnjit20
Copy link

mnjit20 commented Jul 30, 2018

@mrsan22 thanks for sharing, it works

@raunaky
Copy link

raunaky commented Oct 9, 2018

@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"

@gagneet
Copy link

gagneet commented Jan 3, 2019

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']
        }]
    },
}

@orwanec
Copy link

orwanec commented Jan 15, 2019

//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"
}
}
]
}
}`

Copy link

ghost commented Feb 18, 2019

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']
    }]
  }
}

@coryhouse
Copy link
Author

coryhouse commented Jul 4, 2019

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

@momoduoladapo
Copy link

momoduoladapo commented Jul 4, 2019

@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

@Frankie-B
Copy link

Frankie-B commented Jul 21, 2019

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

@soji-opa
Copy link

soji-opa commented Jul 21, 2019

@coryhouse
Copy link
Author

coryhouse commented Jul 21, 2019

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

@soloking2
Copy link

soloking2 commented Jul 26, 2019

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']}
]
}
}`

@coryhouse
Copy link
Author

coryhouse commented Jul 26, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment