webpack-dev-server react code example

Example 1: webpack dev server

devServer: {
		open: true,
		compress: true,
		hot: true,
		inline: true,
		watchContentBase: true,
		contentBase: resolve(process.cwd(), 'build'),
		historyApiFallback: true,
		before: (app, server, compiler) => {
			const fileExist = existsSync('./src/setupProxyx.js')
			if (fileExist) {
				const pathProxy = resolve(process.cwd(), 'src/setupProxy')
				return require(`${pathProxy}`)(app)
			}
		},
		port: process.env.PORT || 3000,
		liveReload: false
	},

Example 2: webpack dev server

devServer: {
		open: true,
		compress: true,
		hot: true,
		inline: true,
		watchContentBase: true,
		contentBase: resolve(process.cwd(), 'build'),
		historyApiFallback: true,
		before: (app, server, compiler) => {
			const fileExist = existsSync('./src/setupProxy.js')
			if (fileExist) {
				const pathProxy = resolve(process.cwd(), 'src/setupProxy')
				return require(`${pathProxy}`)(app)
			}
		},
		port: process.env.PORT || 3000,
		liveReload: false
	},

Example 3: reactjs and webpack tutorial

npm i webpack webpack-cli --save-dev

Example 4: webpack dev server

// TIPS AND TRICK CUSTOM PROXY IN WEBPACK DEV SERVER BY restuwahyu13
//NOTE this method like using CRA in React

// manual proxy before
module.exports = {
	devServer: {
		open: true,
		compress: true,
		hot: true,
		inline: true,
		lazy: true,
		contentBase: resolve(process.cwd(), 'build'),
		port: process.env.PORT || 3000,
		proxy: {
          '/api/*', {
          	target: 'http://localhost:3001',
			secure: false,
			changeOrigin: true,
			headers: {
				'Access-Control-Allow-Origin': '*',
				'Access-Control-Allow-Credentials': '*',
				'Access-Control-Allow-Methods': '*'
			}
          }
        }
		liveReload: false
	}
}

// custom proxy after
module.exports = {
	devServer: {
		open: true,
		compress: true,
		hot: true,
		inline: true,
		lazy: true,
		contentBase: resolve(process.cwd(), 'build'),
		port: process.env.PORT || 3000,
		before: (app, server, compiler) => {
			const pathProxy = resolve(process.cwd(), 'src/setupProxy')
			return require(`${pathProxy}`)(app)
		},
		liveReload: false
	}
}

Example 5: reactjs and webpack tutorial

"scripts": {
  "build": "webpack --mode production"
}