Created
July 30, 2017 05:22
-
-
Save lcaballero/7bbfab62dc3639eb72b13a326521037a to your computer and use it in GitHub Desktop.
Initialize a webpack + react + redux + some-loaders... + sass --- because shit just got giant real.
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
| #!/bin/bash | |
| function react() { | |
| npm init -y | |
| npm install -S \ | |
| react \ | |
| react-dom \ | |
| redux \ | |
| babel-core \ | |
| babel-loader \ | |
| babel-plugin-add-module-exports \ | |
| babel-plugin-react-html-attrs \ | |
| babel-plugin-transform-class-properties \ | |
| babel-plugin-transform-decorators-legacy \ | |
| babel-preset-es2015 \ | |
| babel-preset-react \ | |
| babel-preset-stage-0 \ | |
| node-sass \ | |
| file-loader \ | |
| style-loader \ | |
| css-loader \ | |
| sass-loader \ | |
| webpack \ | |
| webpack-dev-server | |
| } | |
| function wp_js() { | |
| local wp=$(cat <<EOF | |
| var debug = process.env.NODE_ENV !== "production"; | |
| var webpack = require('webpack'); | |
| var path = require('path'); | |
| module.exports = { | |
| context: path.join(__dirname, "src"), | |
| devtool: debug ? "inline-sourcemap" : false, | |
| entry: "./js/client.js", | |
| module: { | |
| loaders: [ | |
| { | |
| test: /\.js?$/, | |
| exclude: /(node_modules|bower_components)/, | |
| loader: 'babel-loader', | |
| query: { | |
| presets: ['react', 'es2015', 'stage-0'], | |
| plugins: [ | |
| 'react-html-attrs', | |
| 'transform-decorators-legacy', | |
| 'transform-class-properties' | |
| ] | |
| } | |
| }, | |
| { | |
| test: /\.css$/, | |
| loaders: ['style-loader','css-loader'] | |
| }, | |
| { | |
| test: /\.scss$/, | |
| loaders: ['style-loader', 'css-loader', 'sass-loader'] | |
| } | |
| ] | |
| }, | |
| output: { | |
| path: __dirname + "/dist/", | |
| filename: "client.js" | |
| }, | |
| plugins: debug ? [] : [ | |
| new webpack.optimize.DedupePlugin(), | |
| new webpack.optimize.OccurrenceOrderPlugin(), | |
| new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), | |
| ], | |
| }; | |
| EOF | |
| ) | |
| echo "$wp" > webpack.config.js | |
| } | |
| function index_html() { | |
| local index=$(cat <<EOF | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>React Tutorials</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script src="client.js"></script> | |
| </body> | |
| </html> | |
| EOF | |
| ) | |
| echo "$index" > src/index.html | |
| } | |
| function entry_js() { | |
| local entry=$(cat <<EOF | |
| import React from "react"; | |
| import ReactDOM from "react-dom"; | |
| require("file-loader?name=index.html!../index.html"); | |
| class Layout extends React.Component { | |
| render() { | |
| const { title } = this.props; | |
| return ( | |
| <div>{ title }</div> | |
| ) | |
| } | |
| } | |
| const render = () => { | |
| const app = document.getElementById('app'); | |
| ReactDOM.render(<Layout title="Entry JS" />, app); | |
| }; | |
| render(); | |
| EOF | |
| ) | |
| mkdir -p src/js/ | |
| echo "$entry" > src/js/client.js | |
| } | |
| function clean() { | |
| rm -rf \ | |
| node_modules \ | |
| src \ | |
| dist \ | |
| package.json \ | |
| webpack.config.js | |
| } | |
| function all() { | |
| wp_js | |
| entry_js | |
| index_html | |
| react | |
| ./node_modules/.bin/webpack | |
| } | |
| function serve() { | |
| ./node_modules/.bin/webpack-dev-server --content-base dist --inline --hot | |
| } | |
| $1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment