Last active
July 18, 2020 12:59
-
-
Save chanakasan/43191ebfad77b966f3f651165928f34b to your computer and use it in GitHub Desktop.
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
| { | |
| presets: [ | |
| [ | |
| '@babel/preset-env', | |
| { | |
| modules: false | |
| } | |
| ], | |
| '@babel/preset-react' | |
| ], | |
| plugins: [ | |
| 'react-hot-loader/babel' | |
| ] | |
| } |
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
| { | |
| "name": "chk-react-boilerplate-1", | |
| "version": "1.0.0", | |
| "private": true, | |
| "license": "Apache-2.0", | |
| "scripts": { | |
| "build": "NODE_ENV=production webpack -p", | |
| "start": "webpack-dev-server --hot" | |
| }, | |
| "dependencies": { | |
| "react": "^16.13.1", | |
| "react-dom": "^16.13.1", | |
| "react-hot-loader": "^4.12.21", | |
| "lodash": "^4.17.15" | |
| }, | |
| "devDependencies": { | |
| "webpack": "^4.43.0", | |
| "webpack-cli": "^3.3.11", | |
| "@babel/preset-react": "^7.9.4", | |
| "babel-loader": "^8.1.0", | |
| "@babel/core": "^7.9.6", | |
| "@babel/preset-env": "^7.9.6", | |
| "@hot-loader/react-dom": "^16.13.0+4.12.20", | |
| "webpack-dev-server": "^3.11.0", | |
| "copy-webpack-plugin": "^6.0.1", | |
| "html-webpack-plugin": "^4.3.0", | |
| "lodash-webpack-plugin": "^0.11.5", | |
| "clean-webpack-plugin": "^3.0.0", | |
| "file-loader": "^6.0.0", | |
| "url-loader": "^4.1.0", | |
| "webpack-bundle-analyzer": "^3.8.0" | |
| } | |
| } |
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"; | |
| import Root from "./root"; | |
| var mountNode = document.getElementById("root"); | |
| ReactDOM.render(<Root />, mountNode); |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, viewport-fit=cover"> | |
| <title><%= htmlWebpackPlugin.options.title %></title> | |
| <!-- NOTE: css is injected by webpack as <style> tags --> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <!-- NOTE: bundle.js is injected by webpack--> | |
| </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 { hot } from 'react-hot-loader/root' | |
| import App from './app' | |
| const Root = () => ( | |
| <App /> | |
| ) | |
| export default hot(Root) |
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 webpack = require('webpack'); | |
| const path = require('path'); | |
| const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
| const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); | |
| const { CleanWebpackPlugin } = require('clean-webpack-plugin'); | |
| const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; | |
| const nodeEnv = process.env.NODE_ENV | |
| const config = { | |
| mode: (nodeEnv === 'production' ? 'production' : 'development'), | |
| entry: [ | |
| 'react-hot-loader/patch', | |
| './src/index.js' | |
| ], | |
| output: { | |
| path: path.resolve(__dirname, 'dist'), | |
| filename: '[name].[contenthash].js' | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.(js|jsx)$/, | |
| use: 'babel-loader', | |
| exclude: /node_modules/ | |
| }, | |
| { | |
| test: /\.svg$/, | |
| use: 'file-loader' | |
| }, | |
| { | |
| test: /\.png$/, | |
| use: [ | |
| { | |
| loader: 'url-loader', | |
| options: { | |
| mimetype: 'image/png' | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| resolve: { | |
| extensions: [ | |
| '.js', | |
| '.jsx' | |
| ], | |
| alias: { | |
| 'react-dom': '@hot-loader/react-dom' | |
| } | |
| }, | |
| devServer: { | |
| contentBase: './dist' | |
| }, | |
| plugins: [ | |
| new HtmlWebpackPlugin({ | |
| title: 'Loading...', | |
| template: 'src/index.tpl', | |
| }), | |
| new LodashModuleReplacementPlugin, | |
| new CleanWebpackPlugin(), | |
| new BundleAnalyzerPlugin({ | |
| analyzerMode: 'static', | |
| openAnalyzer: false, | |
| }) | |
| ], | |
| optimization: { | |
| runtimeChunk: 'single', | |
| splitChunks: { | |
| cacheGroups: { | |
| vendor: { | |
| test: /[\\/]node_modules[\\/]/, | |
| name: 'vendors', | |
| chunks: 'all' | |
| } | |
| } | |
| } | |
| } | |
| }; | |
| module.exports = (env, argv) => { | |
| if (argv.hot) { | |
| // Cannot use 'contenthash' when hot reloading is enabled. | |
| config.output.filename = '[name].[hash].js'; | |
| } | |
| console.log("[DEBUG] nodeEnv =", nodeEnv) | |
| console.log("[DEBUG] config.mode =", config.mode) | |
| return config; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment