-
-
Save coryhouse/d611e83e432f3ae65cc46ebb9b599930 to your computer and use it in GitHub Desktop.
| 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?
@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.
@mrsan22 thanks for sharing, it works