webpack.txt

npm i --save-dev webpack webpack-cli webpack-dev-server

touch webpack.config.js

didlm objeck modules: 
rules => will tell webpack what it should listen to and how it should compile the code

##inside that paste codes below:

import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

module.exports ={
	mode:'production',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname,'build'),
		filename: 'index.bundle.js'
	},
	node: {
      // Polyfills and mocks to run Node.js-
      // environment code in non-Node environments.
      console: false, // boolean | "mock"
      global: true, // boolean | "mock"
      process: true, // boolean
      __filename: "mock", // boolean | "mock"
      __dirname: "mock", // boolean | "mock"
      Buffer: true, // boolean | "mock"
      setImmediate: true // boolean | "mock" | "empty"
    },
	resolve: {
		modules: ['node_modules',path.resolve(__dirname,'src')]
	}, 
	devServer:{
		contentBase: path.join(__dirname,'src')
	},
	plugins:[
		new HtmlWebpackPlugin({
			template: path.join(__dirname,'src','index.html')
		})
	],
	modules:{
		rules:[
			{
				test:/\.(js|jsx)$/,
				exclude:/node_modules/,
				use:['babel-loader']
			},
			{
				test:/\.(css|scss)$/,
				use:[
					'style-loader',
					'css-loader',
					'sass-loader'
				]
			},
			{
				test:/\.(jpg|png|jpeg|gif|mp3|svg)$/,
				loaders:['file-loader']
			}
		]
	}
	
};