Commit 6ccb5f1

author

Emile Frey

committed

simplifying hot module replacement in webpack config

1 parent 577d7c3 commit 6ccb5f1Copy full SHA for 6ccb5f1

File tree

+48

-10

lines changed

+48

-10

lines changed

Lines changed: 3 additions & 0 deletions

Lines changed: 5 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,9 @@`
`2`	`2`	`"presets": [`
`3`	`3`	`"@babel/preset-env",`
`4`	`4`	`"@babel/preset-react"`
`5`		`- ]`
	`5`	`+ ],`
	`6`	`+ "plugins": [`
	`7`	`+ "@babel/plugin-syntax-dynamic-import",`
	`8`	`+ "@babel/plugin-proposal-class-properties"`
	`9`	`+ ]`
`6`	`10`	`}`

Lines changed: 5 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -11,15 +11,14 @@`
`11`	`11`	`"author": "",`
`12`	`12`	`"license": "ISC",`
`13`	`13`	`"dependencies": {`
`14`		`- "@loadable/component": "^5.15.0",`
`15`	`14`	`"@material-ui/core": "^4.11.0",`
`16`	`15`	`"@material-ui/icons": "^4.9.1",`
`17`	`16`	`"@material-ui/lab": "^4.0.0-alpha.57",`
`18`	`17`	`"@testing-library/jest-dom": "^4.2.4",`
`19`	`18`	`"@testing-library/react": "^9.3.2",`
`20`	`19`	`"@testing-library/user-event": "^7.1.2",`
`21`	`20`	`"axios": "^0.21.1",`
`22`		`- "http-server": "^0.12.3",`
	`21`	`+ "prop-types": "15.7.2",`
`23`	`22`	`"react": "^17.0.1",`
`24`	`23`	`"react-dom": "^17.0.1",`
`25`	`24`	`"react-redux": "^7.2.1",`
`@@ -29,6 +28,8 @@`
`29`	`28`	`},`
`30`	`29`	`"devDependencies": {`
`31`	`30`	`"@babel/core": "^7.14.6",`
	`31`	`+ "@babel/plugin-proposal-class-properties": "^7.12.13",`
	`32`	`+ "@babel/plugin-syntax-dynamic-import": "^7.8.3",`
`32`	`33`	`"@babel/plugin-transform-runtime": "^7.14.5",`
`33`	`34`	`"@babel/preset-env": "^7.14.7",`
`34`	`35`	`"@babel/preset-react": "^7.14.5",`
`@@ -37,8 +38,10 @@`
`37`	`38`	`"@types/react-redux": "^7.1.16",`
`38`	`39`	`"@types/react-router-dom": "^5.1.7",`
`39`	`40`	`"babel-loader": "^8.2.2",`
	`41`	`+ "css-loader": "^5.0.1",`
`40`	`42`	`"html-webpack-plugin": "^5.3.2",`
`41`	`43`	`"react-hot-loader": "^4.13.0",`
	`44`	`+ "style-loader": "^2.0.0",`
`42`	`45`	`"ts-loader": "^8.2.0",`
`43`	`46`	`"typescript": "^4.1.3",`
`44`	`47`	`"webpack": "^5.42.0",`

Lines changed: 24 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-const webpack = require("webpack");`
`2`	`1`	`const path = require("path");`
`3`	`2`	`const HtmlWebpackPlugin = require('html-webpack-plugin');`
`4`	`3`
`@@ -18,7 +17,29 @@ module.exports = {`
`18`	`17`	`},`
`19`	`18`	`{`
`20`	`19`	`test: /\.css$/i,`
`21`		`- use: ['style-loader', 'css-loader'],`
	`20`	`+ use: [`
	`21`	`+ {`
	`22`	`+ loader: 'style-loader',`
	`23`	`+ options: {`
	`24`	`+ esModule: true,`
	`25`	`+ modules: {`
	`26`	`+ namedExport: true,`
	`27`	`+ },`
	`28`	`+ },`
	`29`	`+ },`
	`30`	`+ {`
	`31`	`+ loader: 'css-loader',`
	`32`	`+ options: {`
	`33`	`+ esModule: true,`
	`34`	`+ modules: {`
	`35`	`+ compileType: 'module',`
	`36`	`+ // mode: 'local',`
	`37`	`+ exportLocalsConvention: 'camelCaseOnly',`
	`38`	`+ namedExport: true,`
	`39`	`+ },`
	`40`	`+ },`
	`41`	`+ },`
	`42`	`+ ]`
`22`	`43`	`},`
`23`	`44`	`{`
`24`	`45`	`test: /\.(png\|svg\|jpg\|jpeg\|gif\|ico)$/,`
`@@ -55,6 +76,5 @@ module.exports = {`
`55`	`76`	`template: path.resolve(__dirname, "./index.html"),`
`56`	`77`	`path: path.resolve(__dirname, "./dist"),`
`57`	`78`	`favicon: path.resolve(__dirname, "./public/favicon.ico"),`
`58`		`- }),`
`59`		`- new webpack.HotModuleReplacementPlugin()]`
	`79`	`+ })]`
`60`	`80`	`};`

Lines changed: 11 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,18 +2,26 @@ const webpack = require("webpack");`
`2`	`2`	`const path = require("path");`
`3`	`3`	`var config = require('./webpack.config.base.js')`
`4`	`4`
	`5`	`+`
	`6`	`+config.entry = path.resolve(__dirname, "./src/index.js")`
	`7`	`+`
`5`	`8`	`config.devServer = {`
`6`	`9`	`host: '0.0.0.0',`
`7`	`10`	`disableHostCheck: true,`
`8`	`11`	`port: 3000,`
`9`	`12`	`contentBase: path.resolve(__dirname, "./dist"),`
`10`	`13`	`hot: true,`
`11`	`14`	`historyApiFallback: true,`
`12`		`- overlay: true`
`13`		`-},`
`14`		`-`
	`15`	`+ inline: true,`
	`16`	`+ overlay: true,`
	`17`	`+ headers: {`
	`18`	`+ "Access-Control-Allow-Origin": "*",`
	`19`	`+ "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",`
	`20`	`+ }`
	`21`	`+}`
`15`	`22`
`16`	`23`	`config.plugins = config.plugins.concat([`
	`24`	`+ new webpack.HotModuleReplacementPlugin(),`
`17`	`25`	`new webpack.DefinePlugin({`
`18`	`26`	`'process.env.NODE_ENV': JSON.stringify('development')`
`19`	`27`	`})`

Comments

(0)