Use html-webpack-plugin

pepaar · pepaar · commit 33414fa82a02 · 2017-04-04T00:40:13.000+02:00
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # typescript-webpack-react-flux-boilerplate
 The goal of this repo is to help you start when combining React and Typescript.
 It contains implementation of simple example based on flux pattern.
-LESS in combination of CSS modules is used for styling components and for running, building and bundling there is powerful Webpack.
+LESS in combination of CSS modules is used for styling components. For running, building and bundling there is powerful Webpack.
 
 ## This boilerplate combines
 * [Typescript 2](https://github.com/Microsoft/TypeScript)
@@ -10,15 +10,16 @@ LESS in combination of CSS modules is used for styling components and for runnin
 * [Flux](https://github.com/facebook/flux)
 * [LESS](https://github.com/less/less.js)
 * [CSS modules](https://github.com/css-modules/css-modules)
-* [Webpack](https://github.com/webpack/webpack)
+* [Webpack 2](https://webpack.js.org/)
+* [Tslint](https://palantir.github.io/tslint/)
 
 ## Getting started
 * run **npm install** to download dependencies
 * run **npm start** to build and start webpack-dev-server
 * open **http://localhost:3333/**
 
 ## Build options
-* **npm run build** for single build (creates files in build/ folder)
+* **npm run build** for single build (creates files and index.html in build/ folder)
 * **npm start** to build and start webpack-dev-server
 
 ## More information
diff --git a/index.html b/index.html
@@ -5,7 +5,5 @@
   <body>
     <div id="root">
     </div>
-    <script src="/assets/vendors.js"></script>
-    <script src="/assets/app.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "babel-preset-es2015-loose": "~8.0.0",
     "css-loader": "~0.28.0",
     "file-loader": "~0.11.1",
+    "html-webpack-plugin": "~2.28.0",
     "less": "~2.7.2",
     "less-loader": "~4.0.3",
     "node-libs-browser": "~2.0.0",
diff --git a/server.js b/server.js
@@ -1,5 +1,3 @@
-/// <reference path="node_modules/@types/node/index.d.ts"/>
-
 var path = require('path');
 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,6 @@
 var path = require("path");
 var webpack = require("webpack");
+var HtmlWebpackPlugin = require("html-webpack-plugin");
 
 var nodeModulesPath = path.join(__dirname, 'node_modules');
 var isProduction = process.env.NODE_ENV == "production";
@@ -61,7 +62,10 @@ var config = {
   },
 
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors_[chunkhash].js' })
+    new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors_[hash].js' }),
+    new HtmlWebpackPlugin({
+      template: 'index.html'
+    })
   ]
 };
 
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -6,7 +6,6 @@ var path = require("path");
 
 var mainConfig = new Config().extend("webpack.config");
 mainConfig.module.rules = [];
-mainConfig.plugins = [];
 
 var devConfigExtension = {
   entry: {
@@ -19,7 +18,7 @@ var devConfigExtension = {
 
   output: {
     filename: '[name].js',
-    publicPath: "http://localhost:3333/assets/"
+    publicPath: "http://localhost:3333/"
   },
 
   // more options here: http://webpack.github.io/docs/configuration.html#devtool
@@ -59,9 +58,8 @@ var devConfigExtension = {
   },
 
    plugins: [
-    new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js' }),
     // Used for hot-reload
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
   ]
 };
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-/// <reference path="node_modules/@types/node/index.d.ts"/>`
`2`		`-`
`3`	`1`	`var path = require('path');`
`4`	`2`	`var webpack = require('webpack');`
`5`	`3`	`var WebpackDevServer = require('webpack-dev-server');`