Enable production assets hash

2016-10-12 17:15:59 +08:00 · 2016-10-12 17:15:59 +08:00 · 2cafe15e85
parent 91266f1cad
commit 2cafe15e85
10 changed files with 75 additions and 11 deletions
--- a/.gitignore
+++ b/.gitignore
@ -24,3 +24,4 @@ public/js/config.js

 # ignore webpack build
 public/build
+public/views/build
--- 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",
--- 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>
--- 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">
--- a/public/views/includes/header.ejs
+++ 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">
+<% } %>
--- a/public/views/includes/scripts.ejs
+++ 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>
+<% } %>
--- 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>
--- 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 %>
--- 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>

--- 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'
+    },
 });