diff --git a/.gitignore b/.gitignore
index 29f916f0d..9a95231c7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,4 @@ public/js/config.js
 
 # ignore webpack build
 public/build
+public/views/build
diff --git a/package.json b/package.json
index 5ba9101f2..03333fb82 100644
--- a/package.json
+++ b/package.json
@@ -122,13 +122,16 @@
     "url": "https://github.com/hackmdio/hackmd.git"
   },
   "devDependencies": {
+    "babel-core": "^6.17.0",
     "babel-loader": "^6.2.5",
     "bower-webpack-plugin": "^0.1.9",
     "css-loader": "^0.25.0",
+    "ejs-loader": "^0.3.0",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^2.22.0",
     "imports-loader": "^0.6.5",
     "json-loader": "^0.5.4",
     "less": "^2.7.1",
diff --git a/public/views/foot.ejs b/public/views/foot.ejs
index 0ce4b85b4..abf2da12c 100644
--- a/public/views/foot.ejs
+++ b/public/views/foot.ejs
@@ -20,9 +20,8 @@
 <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
 <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
 <% } %>
-<script src="<%- url %>/build/vendor.js" defer></script>
 <!--codemirror-->
-<script src="<%- url %>/build/index.js" defer></script>
+<%- include build/index-scripts %>
 <script src="<%- url %>/js/google-drive-upload.js" defer></script>
 <script src="<%- url %>/js/google-drive-picker.js" defer></script>
 <script src="<%- url %>/js/reveal-markdown.js" defer></script>
diff --git a/public/views/head.ejs b/public/views/head.ejs
index 72434892d..f4ba108ab 100644
--- a/public/views/head.ejs
+++ b/public/views/head.ejs
@@ -36,7 +36,7 @@
 <link rel="stylesheet" href="<%- url %>/vendor/showup/showup.css">
 <link rel="stylesheet" href="<%- url %>/css/mermaid.css">
 <link rel="stylesheet" href="<%- url %>/css/markdown.css">
-<link rel="stylesheet" href="<%- url %>/build/index.css">
+<%- include build/index-header %>
 <link rel="stylesheet" href="<%- url %>/css/index.css">
 <link rel="stylesheet" href="<%- url %>/css/extra.css">
 <link rel="stylesheet" href="<%- url %>/css/slide-preview.css">
diff --git a/public/views/includes/header.ejs b/public/views/includes/header.ejs
new file mode 100644
index 000000000..89f3a0d19
--- /dev/null
+++ b/public/views/includes/header.ejs
@@ -0,0 +1,3 @@
+<% for (var css in htmlWebpackPlugin.files.css) { %>
+<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+<% } %>
diff --git a/public/views/includes/scripts.ejs b/public/views/includes/scripts.ejs
new file mode 100644
index 000000000..4eec75e85
--- /dev/null
+++ b/public/views/includes/scripts.ejs
@@ -0,0 +1,3 @@
+<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" defer></script>
+<% } %>
diff --git a/public/views/index.ejs b/public/views/index.ejs
index f24a039e9..0e41db570 100644
--- a/public/views/index.ejs
+++ b/public/views/index.ejs
@@ -27,6 +27,7 @@
     <link rel="stylesheet" href="<%- url %>/vendor/select2/select2.css">
     <link rel="stylesheet" href="<%- url %>/vendor/select2/select2-bootstrap.css">
     <!-- Custom styles for this template -->
+    <%- include build/cover-header %>
     <link rel="stylesheet" href="<%- url %>/css/cover.css">
     <link rel="stylesheet" href="<%- url %>/css/site.css">
 </head>
@@ -193,7 +194,6 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="<%- url %>/build/vendor.js" defer></script>
     <% if(useCDN) { %>
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
     <script src="//cdn.jsdelivr.net/velocity/1.3.1/velocity.min.js" defer></script>
@@ -205,7 +205,7 @@
     <script src="<%- url %>/vendor/velocity/velocity.min.js" defer></script>
 	<script src="<%- url %>/vendor/moment/min/moment-with-locales.min.js" defer></script>
 	<% } %>
-    <script src="<%- url %>/build/locale.js" defer></script>
+    <%- include build/cover-scripts %>
 </body>
 
 </html>
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index 6f7c4e727..e617383cf 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -35,6 +35,7 @@
     <link rel="stylesheet" href='<%- url %>/css/extra.css'>
     <link rel="stylesheet" href="<%- url %>/css/slide-preview.css">
     <link rel="stylesheet" href='<%- url %>/css/site.css'>
+    <%- include build/pretty-header %>
     <link rel="stylesheet" href='<%- url %>/build/public.css'>
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -97,13 +98,11 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" defer></script>
 <% } else { %>
-<script src="<%- url %>/build/vendor.js" defer></script>
 <script src="<%- url %>/vendor/js-yaml/dist/js-yaml.min.js" defer></script>
 <script type="text/javascript" src="<%- url %>/vendor/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
 <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
 <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
 <% } %>
+<%- include build/pretty-scripts %>
 <script src="<%- url %>/js/reveal-markdown.js" defer></script>
-<script src="<%- url %>/build/public.js" defer></script>
-
 <%- include ga %>
diff --git a/public/views/slide.ejs b/public/views/slide.ejs
index c463f378e..f959a346e 100644
--- a/public/views/slide.ejs
+++ b/public/views/slide.ejs
@@ -39,6 +39,7 @@
         <link rel="stylesheet" href='<%- url %>/css/extra.css'>
         <link rel="stylesheet" href="<%- url %>/css/site.css">
         <link rel="stylesheet" href="<%- url %>/css/slide.css">
+        <%- include build/slide-header %>
 
         <!-- If the query includes 'print-pdf', use the PDF print sheet -->
         <script>
@@ -94,7 +95,6 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" defer></script>
         <% } else { %>
-        <script src="<%- url %>/build/vendor.js" defer></script>
         <script src="<%- url %>/vendor/reveal.js/lib/js/head.min.js"></script>
         <script src="<%- url %>/vendor/reveal.js/js/reveal.js"></script>
         <script src="<%- url %>/vendor/velocity/velocity.min.js" defer></script>
@@ -103,7 +103,7 @@
         <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
         <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
         <% } %>
-        <script src="<%- url %>/build/slide.js" defer></script>
+        <%- include build/slide-scripts %>
     </body>
 </html>
 
diff --git a/webpack.production.js b/webpack.production.js
index ce8dd27ea..173ca0cd6 100644
--- a/webpack.production.js
+++ b/webpack.production.js
@@ -1,6 +1,8 @@
 var baseConfig = require('./webpackBaseConfig');
 var webpack = require('webpack');
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = Object.assign({}, baseConfig, {
     plugins: [
@@ -19,6 +21,54 @@ module.exports = Object.assign({}, baseConfig, {
             filename: '[name].js',
             minChunks: Infinity
         }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'locale'],
+            filename: path.join(__dirname, 'public/views/build/cover-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'locale'],
+            filename: path.join(__dirname, 'public/views/build/cover-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'public'],
+            filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'public'],
+            filename: path.join(__dirname, 'public/views/build/pretty-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-scripts.ejs'),
+            inject: false
+        }),
         new webpack.DefinePlugin({
             'process.env': {
                 'NODE_ENV': JSON.stringify('production')
@@ -30,5 +80,11 @@ module.exports = Object.assign({}, baseConfig, {
             },
             sourceMap: false
         })
-    ]
+    ],
+
+    output: {
+        path: path.join(__dirname, 'public/build'),
+        publicPath: '/build/',
+        filename: '[id].[name].[hash].js'
+    },
 });