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/
|
dist/
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
yarn-error.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
|
package-lock.json
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,8 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
public function __construct($url){
|
public function __construct($url){
|
||||||
$this->pagename = $url['page'];
|
$this->pagename = isset($url['page']) ? $url['page'] : null;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -29,6 +30,28 @@
|
||||||
echo "page not found";
|
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
|
/* POST-CALL
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,12 @@
|
||||||
|
|
||||||
"routes": {
|
"routes": {
|
||||||
|
|
||||||
|
"/js/bundle.js": {
|
||||||
|
"methods": ["GET"],
|
||||||
|
"controller": "page:bundle",
|
||||||
|
"arguments": {}
|
||||||
|
},
|
||||||
|
|
||||||
"/{page}/": {
|
"/{page}/": {
|
||||||
"methods": ["GET"],
|
"methods": ["GET"],
|
||||||
"controller": "page:load",
|
"controller": "page:load",
|
||||||
|
|
|
||||||
12
package.json
12
package.json
|
|
@ -7,10 +7,12 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
|
"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": {
|
"dependencies": {
|
||||||
"vue": "^2.4.4"
|
"vue": "^2.5.9"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"> 1%",
|
"> 1%",
|
||||||
|
|
@ -26,8 +28,8 @@
|
||||||
"css-loader": "^0.28.7",
|
"css-loader": "^0.28.7",
|
||||||
"file-loader": "^1.1.4",
|
"file-loader": "^1.1.4",
|
||||||
"vue-loader": "^13.0.5",
|
"vue-loader": "^13.0.5",
|
||||||
"vue-template-compiler": "^2.4.4",
|
"vue-template-compiler": "^2.5.9",
|
||||||
"webpack": "^3.6.0",
|
"webpack": "^3.8.1",
|
||||||
"webpack-dev-server": "^2.9.1"
|
"webpack-dev-server": "^2.9.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
<div id='mainview'></div>
|
<div id='main-vue'></div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Main loop -->
|
<!-- Main loop -->
|
||||||
|
|
|
||||||
27
view/main.js
27
view/main.js
|
|
@ -1,11 +1,26 @@
|
||||||
|
/* (1) Imports
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
/* (1) NPM libs */
|
||||||
import Vue from 'vue'
|
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({
|
new Vue({
|
||||||
el: '#mainview',
|
el: '#main-vue',
|
||||||
render: h => h(require('./vue/main.vue'))
|
render: h => h(main_vue)
|
||||||
})
|
})
|
||||||
|
|
||||||
window.api = new API("http://ndli1718/api/v/1.0/");
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="root">
|
||||||
<h1>{{ msg }}</h1>
|
<h1>{{ msg }}</h1>
|
||||||
<h2>Essential Links</h2>
|
<h2>Essential Links</h2>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'app',
|
name: 'root',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
msg: 'Welcome to Your Vue.js App'
|
msg: 'Welcome to Your Vue.js App'
|
||||||
|
|
@ -30,7 +30,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#app {
|
#root {
|
||||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ module.exports = {
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, './public_html/js'),
|
path: path.resolve(__dirname, './public_html/js'),
|
||||||
publicPath: '/js/',
|
publicPath: '/js/',
|
||||||
filename: 'bundle.js'
|
filename: 'bundle@[hash].js'
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue