Explorar el Código

Fixed issue with caching javascript files generated by webpack when there are changes

howdoyoucode hace 7 años
padre
commit
e0d931e5e7
Se han modificado 5 ficheros con 33 adiciones y 20 borrados
  1. 1 0
      .gitignore
  2. 0 1
      frontend/build/index.tpl.html
  3. 18 18
      frontend/main.js
  4. 2 0
      frontend/package.json
  5. 12 1
      frontend/webpack.config.js

+ 1 - 0
.gitignore

@@ -18,6 +18,7 @@ backend/config/default.json
 # Front End
 frontend/node_modules/
 frontend/build/*.js
+frontend/build/index.html
 frontend/build/config/default.json
 
 npm

+ 0 - 1
frontend/build/index.html → frontend/build/index.tpl.html

@@ -54,6 +54,5 @@
 </head>
 <body>
 	<script src='https://www.google.com/recaptcha/api.js'></script>
-	<script src='/bundle.js'></script>
 </body>
 </html>

+ 18 - 18
frontend/main.js

@@ -79,63 +79,63 @@ router.afterEach(data => {
 
 router.map({
 	'/': {
-		component: resolve => require(['./components/pages/Home.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/pages/Home.vue')), 'home')
 	},
 	'*': {
-		component: resolve => require(['./components/404.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/404.vue')), '404')
 	},
 	'404': {
-		component: resolve => require(['./components/404.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/404.vue')), '404')
 	},
 	'/terms': {
-		component: resolve => require(['./components/pages/Terms.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/pages/Terms.vue')), 'terms')
 	},
 	'/privacy': {
-		component: resolve => require(['./components/pages/Privacy.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/pages/Privacy.vue')), 'privacy')
 	},
 	'/team': {
-		component: resolve => require(['./components/pages/Team.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/pages/Team.vue')), 'team')
 	},
 	'/news': {
-		component: resolve => require(['./components/pages/News.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/pages/News.vue')), 'news')
 	},
 	'/about': {
-		component: resolve => require(['./components/pages/About.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/pages/About.vue')), 'about')
 	},
 	'/u/:username': {
-		component: resolve => require(['./components/User/Show.vue'], resolve),
+		component: resolve => require.ensure([], () => resolve(require('./components/User/Show.vue')), 'show-user')
 	},
 	'/settings': {
-		component: resolve => require(['./components/User/Settings.vue'], resolve),
+		component: resolve => require.ensure([], () => resolve(require('./components/User/Settings.vue')), 'settings'),
 		loginRequired: true
 	},
 	'/reset_password': {
-		component: resolve => require(['./components/User/ResetPassword.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/User/ResetPassword.vue')), 'reset-password')
 	},
 	'/login': {
-		component: resolve => require(['./components/Modals/Login.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/Modals/Login.vue')), 'login')
 	},
 	'/register': {
-		component: resolve => require(['./components/Modals/Register.vue'], resolve)
+		component: resolve => require.ensure([], () => resolve(require('./components/Modals/Register.vue')), 'register')
 	},
 	'/admin': {
-		component: resolve => require(['./components/pages/Admin.vue'], resolve),
+		component: resolve => require.ensure([], () => resolve(require('./components/pages/Admin.vue')), 'admin'),
 		adminRequired: true
 	},
 	'/admin/:page': {
-		component: resolve => require(['./components/pages/Admin.vue'], resolve),
+		component: resolve => require.ensure([], () => resolve(require('./components/pages/Admin.vue')), 'admin'),
 		adminRequired: true
 	},
 	'/official/:id': {
-		component: resolve => require(['./components/Station/Station.vue'], resolve),
+		component: resolve => require.ensure([], () => resolve(require('./components/Station/Station.vue')), 'station'),
 		officialRequired: true
 	},
 	'/:id': {
-		component: resolve => require(['./components/Station/Station.vue'], resolve),
+		component: resolve => require.ensure([], () => resolve(require('./components/Station/Station.vue')), 'station'),
 		officialRequired: true
 	},
 	'/community/:id': {
-		component: resolve => require(['./components/Station/Station.vue'], resolve),
+		component: resolve => require.ensure([], () => resolve(require('./components/Station/Station.vue')), 'station'),
 		communityRequired: true
 	}
 });

+ 2 - 0
frontend/package.json

@@ -20,6 +20,7 @@
     "eslint": "^3.4.0",
     "eslint-loader": "^1.5.0",
     "eslint-plugin-html": "^1.5.2",
+    "html-webpack-plugin": "^2.28.0",
     "sass-loader": "^4.0.2",
     "style-loader": "^0.13.1",
     "vue-hot-reload-api": "^1.3.3",
@@ -28,6 +29,7 @@
     "vue-style-loader": "^1.0.0",
     "webpack": "^1.14.0",
     "webpack-dev-server": "^1.15.1",
+    "webpack-md5-hash": "0.0.5",
     "whatwg-fetch": "^0.11.1"
   },
   "dependencies": {

+ 12 - 1
frontend/webpack.config.js

@@ -1,4 +1,6 @@
 const webpack = require('webpack');
+const WebpackMd5Hash = require('webpack-md5-hash');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
 	devtool: 'eval-source-map',
@@ -6,8 +8,17 @@ module.exports = {
 	output: {
 		path: __dirname + '/build/',
 		publicPath: '/',
-		filename: 'bundle.js'
+		filename: '[name].[chunkhash].js'
 	},
+	plugins: [
+		new WebpackMd5Hash(),
+		new HtmlWebpackPlugin({
+			hash: true,
+			template: "build/index.tpl.html",
+			inject: "body",
+			filename: "index.html"
+		})
+	],
 	module: {
 		loaders: [
 			{