Last active
December 3, 2020 08:58
-
-
Save thatisuday/35d0ec9c2be857a9f23681b9fc5d8155 to your computer and use it in GitHub Desktop.
A minimal Webpack conguration for React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang='en'> | |
| <head> | |
| <meta charset='UTF-8'> | |
| <title>Sample React Application</title> | |
| </head> | |
| <body style="background-color: #eee;"> | |
| <div id="app"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| // export App components | |
| import { App } from './components/app'; | |
| // compile App component in `#app` HTML element | |
| ReactDOM.render( <App name='Ross Geller'/>, document.getElementById( 'app' ) ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const path = require( 'path' ); | |
| const HTMLWebpackPlugin = require( 'html-webpack-plugin' ); | |
| module.exports = { | |
| // webpack optimization mode | |
| mode: ( 'development' === process.env.NODE_ENV ? 'development' : 'production' ), | |
| // entry files | |
| entry: [ | |
| './src/index.js', // react | |
| ], | |
| // output files and chunks | |
| output: { | |
| path: path.resolve( __dirname, 'dist' ), | |
| filename: '[name].js' | |
| }, | |
| // module/loaders configuration | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.jsx?$/, | |
| exclude: /node_modules/, | |
| use: [ 'babel-loader' ] | |
| } | |
| ] | |
| }, | |
| // webpack plugins | |
| plugins: [ | |
| // prepare HTML file with assets | |
| new HTMLWebpackPlugin( { | |
| filename: 'index.html', | |
| template: path.resolve( __dirname, 'src/index.html' ) | |
| } ), | |
| ], | |
| // resolve files configuration | |
| resolve: { | |
| // file extensions | |
| extensions: [ '.js', '.jsx' ] | |
| }, | |
| // development server configuration | |
| devServer: { | |
| port: 9000 | |
| }, | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment