Webpack bundle management with hashes (core.router) : 'public_html/js/bundle@{hash}.js' + pre-script to remove bundles (packages.json) + min updates
This commit is contained in:
xdrm-brackets
parent
07edda0345
commit
d03d889024
|
|
@ -4,8 +4,8 @@ node_modules/
|
|||
dist/
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
public_html/js/bundle.js
|
||||
public_html/js/bundle.js*
|
||||
public_html/js/bundle@*.js
|
||||
public_html/js/bundle@*.js*
|
||||
package-lock.json
|
||||
|
||||
# Editor directories and files
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@
|
|||
*
|
||||
*/
|
||||
public function __construct($url){
|
||||
$this->pagename = $url['page'];
|
||||
$this->pagename = isset($url['page']) ? $url['page'] : null;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -29,6 +30,28 @@
|
|||
echo "page not found";
|
||||
}
|
||||
|
||||
|
||||
/* Manage bundle hash
|
||||
*
|
||||
*/
|
||||
public function bundle(){
|
||||
|
||||
/* (1) Extract /public_html/js/ all .js files */
|
||||
$js_scripts = glob(__PUBLIC__.'/js/*.js');
|
||||
|
||||
/* (2) If match pattern 'bundle@*.js' */
|
||||
foreach($js_scripts as $fname){
|
||||
|
||||
$bname = basename($fname);
|
||||
|
||||
// if match -> load it and exit
|
||||
if( preg_match('/bundle@[\da-f]+\.js/', $bname) )
|
||||
header("Location: /js/$bname");
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* POST-CALL
|
||||
*
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@
|
|||
|
||||
"routes": {
|
||||
|
||||
"/js/bundle.js": {
|
||||
"methods": ["GET"],
|
||||
"controller": "page:bundle",
|
||||
"arguments": {}
|
||||
},
|
||||
|
||||
"/{page}/": {
|
||||
"methods": ["GET"],
|
||||
"controller": "page:load",
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -7,10 +7,12 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
"build:clean": "rm ./public_html/js/bundle@*.js*",
|
||||
"build:bundle": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
"build": "npm run build:clean && npm run build:bundle"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.4.4"
|
||||
"vue": "^2.5.9"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
|
@ -26,8 +28,8 @@
|
|||
"css-loader": "^0.28.7",
|
||||
"file-loader": "^1.1.4",
|
||||
"vue-loader": "^13.0.5",
|
||||
"vue-template-compiler": "^2.4.4",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-dev-server": "^2.9.1"
|
||||
"vue-template-compiler": "^2.5.9",
|
||||
"webpack": "^3.8.1",
|
||||
"webpack-dev-server": "^2.9.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<body>
|
||||
|
||||
|
||||
<div id='mainview'></div>
|
||||
<div id='main-vue'></div>
|
||||
|
||||
|
||||
<!-- Main loop -->
|
||||
|
|
|
|||
27
view/main.js
27
view/main.js
|
|
@ -1,11 +1,26 @@
|
|||
/* (1) Imports
|
||||
---------------------------------------------------------*/
|
||||
/* (1) NPM libs */
|
||||
import Vue from 'vue'
|
||||
import {API} from './lib/api-es6'
|
||||
// import App from './vue/main.vue'
|
||||
|
||||
/* (2) Internal libs */
|
||||
import {API} from './lib/api-es6'
|
||||
|
||||
/* (3) Vues */
|
||||
import main_vue from './vue/main.vue'
|
||||
|
||||
|
||||
/* (2) Initialisation
|
||||
---------------------------------------------------------*/
|
||||
/* (1) API */
|
||||
window.api = new API("http://ndli1718/api/v/1.0/");
|
||||
|
||||
/* (2) wsclient */
|
||||
//todo: init websocket client
|
||||
|
||||
/* (3) Render view */
|
||||
|
||||
new Vue({
|
||||
el: '#mainview',
|
||||
render: h => h(require('./vue/main.vue'))
|
||||
el: '#main-vue',
|
||||
render: h => h(main_vue)
|
||||
})
|
||||
|
||||
window.api = new API("http://ndli1718/api/v/1.0/");
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div id="root">
|
||||
<h1>{{ msg }}</h1>
|
||||
<h2>Essential Links</h2>
|
||||
<ul>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app',
|
||||
name: 'root',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
#root {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ module.exports = {
|
|||
output: {
|
||||
path: path.resolve(__dirname, './public_html/js'),
|
||||
publicPath: '/js/',
|
||||
filename: 'bundle.js'
|
||||
filename: 'bundle@[hash].js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue