coryhouse/webpack.config.dev.js

brinka · 2017-09-03T23:35:11Z

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

brinka · 2017-09-04T00:06:51Z

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 · 2017-09-04T14:26:16Z

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 · 2017-09-04T14:29:41Z

Here is my error before trying Brinka's change.

nastanford · 2017-09-04T14:31:13Z

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

nastanford · 2017-09-04T14:33:17Z

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

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

brinka · 2017-09-04T20:06:48Z

You probably don't have to incorporate my changes at all, because I use [email protected] 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 · 2017-09-20T19:16:27Z

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

mrsan22 · 2017-10-10T05:17:37Z

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 · 2018-07-03T04:36:33Z

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

not-nullexception · 2018-07-22T18:53:37Z

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 · 2018-07-30T15:50:15Z

@mrsan22 thanks for sharing, it works

raunaky · 2018-10-09T20:53:34Z

@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 · 2019-01-03T13:00:58Z

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 · 2019-01-15T15:42:06Z

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

ghost · 2019-02-18T18:34:32Z

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 · 2019-07-04T15:18:46Z

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

momoduoladapo · 2019-07-04T15:51:14Z

@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 · 2019-07-21T16:14:06Z

@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 · 2019-07-21T16:43:14Z

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.

coryhouse · 2019-07-21T17:13:44Z

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

soloking2 · 2019-07-26T20:29:10Z

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 · 2019-07-26T21:22:58Z

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

coryhouse/webpack.config.dev.js

brinka commented Sep 3, 2017 •

edited

Loading

brinka commented Sep 4, 2017

nastanford commented Sep 4, 2017

nastanford commented Sep 4, 2017

nastanford commented Sep 4, 2017

nastanford commented Sep 4, 2017

brinka commented Sep 4, 2017 •

edited

Loading

AlexSerbanG commented Sep 20, 2017

mrsan22 commented Oct 10, 2017 •

edited

Loading

nhamar commented Jul 3, 2018

not-nullexception commented Jul 22, 2018

mnjit20 commented Jul 30, 2018

raunaky commented Oct 9, 2018

gagneet commented Jan 3, 2019 •

edited

Loading

orwanec commented Jan 15, 2019 •

edited

Loading

ghost commented Feb 18, 2019 •

edited by ghost

Loading

coryhouse commented Jul 4, 2019

momoduoladapo commented Jul 4, 2019

Frankie-B commented Jul 21, 2019

soji-opa commented Jul 21, 2019 via email

coryhouse commented Jul 21, 2019

soloking2 commented Jul 26, 2019 •

edited

Loading

coryhouse commented Jul 26, 2019

	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/webpack.config.dev.js

brinka commented Sep 3, 2017 • edited Loading

brinka commented Sep 4, 2017

nastanford commented Sep 4, 2017

nastanford commented Sep 4, 2017

nastanford commented Sep 4, 2017

nastanford commented Sep 4, 2017

brinka commented Sep 4, 2017 • edited Loading

AlexSerbanG commented Sep 20, 2017

mrsan22 commented Oct 10, 2017 • edited Loading

nhamar commented Jul 3, 2018

not-nullexception commented Jul 22, 2018

mnjit20 commented Jul 30, 2018

raunaky commented Oct 9, 2018

gagneet commented Jan 3, 2019 • edited Loading

orwanec commented Jan 15, 2019 • edited Loading

ghost commented Feb 18, 2019 • edited by ghost Loading

coryhouse commented Jul 4, 2019

momoduoladapo commented Jul 4, 2019

Frankie-B commented Jul 21, 2019

soji-opa commented Jul 21, 2019 via email

coryhouse commented Jul 21, 2019

soloking2 commented Jul 26, 2019 • edited Loading

coryhouse commented Jul 26, 2019

brinka commented Sep 3, 2017 •

edited

Loading

brinka commented Sep 4, 2017 •

edited

Loading

mrsan22 commented Oct 10, 2017 •

edited

Loading

gagneet commented Jan 3, 2019 •

edited

Loading

orwanec commented Jan 15, 2019 •

edited

Loading

ghost commented Feb 18, 2019 •

edited by ghost

Loading

soloking2 commented Jul 26, 2019 •

edited

Loading