Merge pull request #1 from rodolfo2488/master

athornburg · web-flow · commit c684701bfb19 · 2017-04-19T08:02:58.000-07:00
Added hot-loader to react starter kit and production config
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "jest",
-    "serve": "node_modules/.bin/webpack-dev-server"
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --color",
+    "prod": "cross-env NODE_ENV=production webpack"
   },
   "keywords": [
     "typescript",
@@ -19,16 +20,23 @@
     "@types/enzyme": "^2.7.7",
     "@types/jasmine": "^2.5.47",
     "awesome-typescript-loader": "^3.1.2",
+    "cross-env": "4.0.0",
     "enzyme": "^2.8.0",
+    "extract-text-webpack-plugin": "2.1.0",
+    "html-webpack-plugin": "2.28.0",
     "jest": "^19.0.2",
     "karma": "^1.6.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-typescript": "^3.0.0",
     "karma-typescript-preprocessor": "^0.3.1",
     "react-addons-test-utils": "^15.5.1",
+    "react-hot-loader": "1.3.1",
     "source-map-loader": "^0.2.1",
+    "stylelint-webpack-plugin": "0.7.0",
     "typescript": "^2.2.2",
-    "webpack-dev-server": "^2.4.2"
+    "webpack-dev-server": "^2.4.2",
+    "webpack-merge": "4.1.0",
+    "write-file-webpack-plugin": "4.0.2"
   },
   "dependencies": {
     "@types/react": "^15.0.21",
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>Hello React!</title>
+    </head>
+    <body>
+        <div id="hello"></div>
+    </body>
+</html>
diff --git a/src/main/hello.tsx b/src/main/hello.tsx
@@ -4,6 +4,6 @@ export interface HelloProps {}
 
 export class Hello extends React.Component<HelloProps, undefined> {
     render() {
-        return <h1>Hello typescript and react!</h1>;
+        return <h1>Hello typescript and react!, hot-load mode on!</h1>;
     }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,16 +1,21 @@
 {
-    "compilerOptions": {
-        "outDir": "./dist/",
-        "sourceMap": true,
-        "noImplicitAny": true,
-        "module": "commonjs",
-        "target": "es6",
-        "jsx": "react"
-    },
-    "include": [
-        "./src/**/*"
-    ],
-    "files": [
-        "src/**/*"
+  "compilerOptions": {
+    "baseUrl": ".",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es5",
+    "noEmit": true,
+    "jsx": "react",
+    "strictNullChecks": true,
+    "lib": [
+      "dom",
+      "es2015",
+      "es5",
+      "es6"
     ]
+  },
+  "include": [
+    "src/**/*"
+  ]
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,34 +1,15 @@
-module.exports = {
-    entry: "./src/index.tsx",
-    output: {
-        filename: "bundle.js",
-        path: __dirname + "/dist"
-    },
+const webpack = require("webpack");
+const prod    = require('./webpack/webpack.config.prod');
+const dev     = require('./webpack/webpack.config.dev');
 
-    // Enable sourcemaps for debugging webpack's output.
-    devtool: "source-map",
+const isProduction = process.env.NODE_ENV === "production";
 
-    resolve: {
-        // Add '.ts' and '.tsx' as resolvable extensions.
-        extensions: [".ts", ".tsx", ".js", ".json"]
-    },
+let config;
 
-    module: {
-        rules: [
-            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
-            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
+if (isProduction) {
+    config = prod;
+} else {
+    config = dev;
+}
 
-            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
-        ]
-    },
-
-    // When importing a module whose path matches one of the following, just
-    // assume a corresponding global variable exists and use that instead.
-    // This is important because it allows us to avoid bundling all of our
-    // dependencies, which allows browsers to cache those libraries between builds.
-    externals: {
-        "react": "React",
-        "react-dom": "ReactDOM"
-    },
-};
+module.exports = config;
diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js
@@ -0,0 +1,66 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const config = {
+    entry: ["./src/index"],
+    output: {
+        path: path.resolve("./dist"),
+        filename: "[name].js",
+        sourceMapFilename: "[file].map",
+        publicPath: "/dist/"
+    },
+    devtool: "source-map",
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js', '.jsx']
+    },
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.jsx?$/,
+                use: ['source-map-loader']
+            }, {
+                enforce: 'pre',
+                test: /\.tsx?$/,
+                use: ['source-map-loader']
+            }, {
+                test: /\.s?css$/,
+                use: [
+                    {
+                        loader: "style-loader"
+                    }, {
+                        loader: "css-loader"
+                    }, {
+                        loader: "postcss-loader",
+                        options: {
+                            plugins: function () {
+                                return [
+                                    require('postcss-smart-import')({/* ...options */}),
+                                    require('autoprefixer')({/* ...options */}),
+                                    require('precss')({/* ...options */}),
+                                    require('doiuse')({browsers: ['ie >= 9', '> 1%'],}),
+                                    require('colorguard')({/* ...options */}),
+                                    require('postcss-unique-selectors')({/* ...options */}),
+                                    require("postcss-reporter")({clearMessages: true})
+                                ];
+                            }
+                        }
+                    }, {
+                        loader: "sass-loader"
+                    }
+                ]
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: "index.html",
+            template: "./src/index.html",
+            minify: {
+                removeComments: true
+            }
+        })
+    ]
+};
+
+module.exports = config;
diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js
@@ -0,0 +1,43 @@
+const webpack         = require('webpack');
+const path            = require("path");
+const merge           = require('webpack-merge');
+const WriteFilePlugin = require("write-file-webpack-plugin");
+const base            = require("./webpack.config.base");
+
+const hotPort = 8080;
+
+const config = {
+    output: {
+        publicPath: "http://localhost:" + hotPort + "/dist/"
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                exclude: /(node_modules|__tests__)/,
+                use: ['react-hot-loader', 'awesome-typescript-loader']
+            },
+            {
+                test: /\.(png|jpg|woff|woff2|eot|ttf|svg|gif)(\?.+)?(#.+)?$/,
+                use: ["url-loader?limit=100000"]
+            }
+        ]
+    },
+    devServer: {
+        publicPath: "http://localhost:" + hotPort + "/dist/",
+        contentBase: path.resolve("./dist"),
+        port: hotPort,
+        quiet: false,
+        noInfo: false,
+        historyApiFallback: true,
+        hot: true,
+        stats: {
+            colors: true
+        }
+    },
+    plugins: [
+        new WriteFilePlugin({test: /\.html/})
+    ]
+};
+
+module.exports = merge(base, config);
diff --git a/webpack/webpack.config.prod.js b/webpack/webpack.config.prod.js
@@ -0,0 +1,35 @@
+const webpack           = require('webpack');
+const path              = require("path");
+const merge             = require('webpack-merge');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const base              = require("./webpack.config.base");
+
+const config = {
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                exclude: /(node_modules|__tests__)/,
+                use: ['awesome-typescript-loader']
+            }
+        ]
+    },
+    output: {
+        filename: "[name].[chunkhash].js"
+    },
+    plugins: [
+        new ExtractTextPlugin({
+            filename: "[name].[contenthash].css",
+            allChunks: true,
+            disable: false
+        }),
+        new webpack.DefinePlugin({
+            "process.env": {
+                "NODE_ENV": JSON.stringify("production")
+            }
+        }),
+        new webpack.optimize.UglifyJsPlugin()
+    ]
+};
+
+module.exports = merge(base, config);

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,6 @@ export interface HelloProps {}`
`4`	`4`
`5`	`5`	`export class Hello extends React.Component<HelloProps, undefined> {`
`6`	`6`	`render() {`
`7`		`- return <h1>Hello typescript and react!</h1>;`
	`7`	`+ return <h1>Hello typescript and react!, hot-load mode on!</h1>;`
`8`	`8`	`}`
`9`	`9`	`}`