Last active
April 24, 2020 07:54
-
-
Save taiansu/4563831eba26cb62103c38df2bc3efb1 to your computer and use it in GitHub Desktop.
webpack+babel configs 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
| #!/usr/bin/env bash | |
| # remove this file whenever you don't need it. you need json package to execute the last part. | |
| echo 'installing npm dependencies...' | |
| npm i -s react react-dom prop-types react-hot-loader | |
| echo 'installing npm devDependencies...' | |
| npm i -D @babel/cli @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin html-webpack-plugin webpack webpack-cli webpack-dev-server | |
| echo 'add scripts to package.json...' | |
| json -f package.json -I -e "this.scripts.start=\"webpack-dev-server --mode development --open\"" | |
| json -f package.json -I -e "this.scripts.build=\"webpack --mode production\"" | |
| json -f package.json -I -e "this.scripts.stats=\"webpack --mode production --profile --json > stats.json\"" | |
| json -f package.json -I -e "this.scripts.clean=\"rm -rf node_modules/ && rm -rf dist/\"" | |
| json -f package.json -I -e "this.browserslist=[\"> 1\%\"]" | |
| echo 'move index.html and index.js to src' | |
| mkdir src | |
| mv index.* src | |
| if command -v gsed &> /dev/null; then | |
| gsed -i '1d' src/index.* | |
| fi | |
| echo 'Done. Using follow command to change the permission of all files' | |
| echo '' | |
| echo ' sudo chmod 644 *.* src/*.*' | |
| echo '' |
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
| module.exports = { | |
| presets: [ | |
| [ | |
| '@babel/preset-env', | |
| { | |
| useBuiltIns: 'entry' | |
| } | |
| ], | |
| '@babel/react' | |
| ], | |
| plugins: ['@babel/plugin-syntax-dynamic-import', '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
| <!-- move this to ./src director --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <div id="app" class="container"></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
| // move this to ./src director | |
| import React from 'react' | |
| import ReactDOM from 'react-dom' | |
| const App = () => { | |
| return <div>Hello React</div> | |
| } | |
| ReactDOM.render(<App />, 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 webpack = require('webpack'); | |
| const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
| const config = { | |
| mode: 'development', | |
| entry: './src/index.js', | |
| output: { | |
| filename: 'bundle.js', | |
| path: path.resolve(__dirname, './dist'), | |
| pathinfo: true, | |
| publicPath: '/' | |
| }, | |
| resolve: { | |
| extensions: ['*', '.js', '.jsx'] | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.(js|jsx)$/, | |
| exclude: /node_modules/, | |
| use: [ | |
| { | |
| loader: 'babel-loader', | |
| options: { | |
| cacheDirectory: true | |
| } | |
| }, | |
| 'react-hot-loader/webpack' | |
| ] | |
| } | |
| ] | |
| }, | |
| devServer: { | |
| contentBase: './dist', | |
| progress: false, | |
| hot: true | |
| }, | |
| plugins: [ | |
| new HtmlWebpackPlugin({ | |
| filename: 'index.html', | |
| template: path.join('./src', 'index.html') | |
| }), | |
| new webpack.HotModuleReplacementPlugin() | |
| ] | |
| }; | |
| module.exports = config; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Manual
First, create a folder with npm initialized:
Within the folder, download files of this gits by the following command:
Then execute the script within to install package and config package.json:
Once done, adjust the permission of files. (The automation script will print the command for you.) You need the admin password for the
chmodcommand.You can delete the
autoscript.shwhenever you don't need it.