verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 57 Releases Wiki Activity

Solved bug that caused main webpack assets incorrecly cached by browsers (Deployment should be tested)

This commit is contained in:
Juan Ferrer Toribio 2018-02-13 23:01:28 +01:00
parent 8bc61ffc5a
commit fd0d5b70be
9 changed files with 4047 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
services/auth/Dockerfile
View File

@ -2,6 +2,7 @@ FROM node:8.9.4
COPY auth /app
COPY loopback /loopback
COPY nginx/static/webpack-assets.json /loopback/server/
WORKDIR /app

12
services/auth/client/index.ejs
View File

@ -6,14 +6,8 @@
</head>
<body ng-app="vnAuth">
<vn-login></vn-login>
<script type="text/javascript"
src="/static/bundle.manifest.js">
</script>
<script type="text/javascript"
src="/static/bundle.vendor.js">
</script>
<script type="text/javascript"
src="/static/bundle.auth.js">
</script>
<% for (let jsFile of assets('auth', ['vendor'])) { %>
<script type="text/javascript" src="<%= jsFile %>"></script>
<% } %>
</body>
</html>

3947
services/loopback/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
services/loopback/package.json
View File

@ -7,6 +7,7 @@
"dependencies": {
"compression": "^1.0.3",
"cors": "^2.5.2",
"fs-extra": "^5.0.0",
"helmet": "^1.3.0",
"i18n": "^0.8.3",
"loopback": "^3.14.0",
@ -16,6 +17,7 @@
"loopback-connector-remote": "^3.1.1",
"loopback-context": "^3.3.0",
"md5": "^2.2.1",
"require-yaml": "0.0.1",
"serve-favicon": "^2.0.1",
"strong-error-handler": "^2.1.0"
},

38
services/loopback/server/assets.js Normal file
View File

@ -0,0 +1,38 @@
require('require-yaml');
/**
* Obtains the webpack asset filenames with its hash.
*
* @param {String} main The main asset name
* @param {Array} deps The main asset dependencies
* @return {Array} The assets filenames
*/
function assets(main, deps) {
let jsFiles;
let env = process.env.NODE_ENV ? process.env.NODE_ENV : 'development';
if (env === 'development') {
const wpConfig = require('../../../webpack.config.yml');
let publicPath = wpConfig.publicPath;
jsFiles = [`${publicPath}/manifest.js`];
for (let dep of deps)
jsFiles.push(`${publicPath}/${dep}.js`);
jsFiles.push(`${publicPath}/${main}.js`);
} else {
const wpAssets = require('./webpack-assets.json');
let jsFiles = [wpAssets.manifest.js];
for (let dep of deps)
jsFiles.push(wpAssets[dep].js);
jsFiles.push(wpAssets[main].js);
}
return jsFiles;
}
module.exports = assets;

9
services/loopback/server/server.js
View File

@ -1,9 +1,9 @@
let loopback = require('loopback');
let boot = require('loopback-boot');
let path = require('path');
let fs = require('fs');
let fs = require('fs-extra');
let i18n = require('i18n');
let path = require('path');
module.exports = {
loopback: loopback,
@ -32,6 +32,11 @@ function vnBoot(app, rootDir, rootModule) {
app.set('view engine', 'ejs');
app.set('views', viewDir);
app.use(loopback.static(path.resolve(rootDir, '../client')));
app.get('/', function(req, res) {
res.render(`${viewDir}/index.ejs`, {
assets: require('./assets')
});
});
}
// Initialization

1
services/salix/Dockerfile
View File

@ -2,6 +2,7 @@ FROM node:8.9.4
COPY salix /app
COPY loopback /loopback
COPY nginx/static/webpack-assets.json /loopback/server/
WORKDIR /app

13
services/salix/client/index.ejs
View File

@ -10,15 +10,8 @@
<script type="text/javascript"
src="/static/routes.js">
</script>
<script type="text/javascript"
src="/static/bundle.manifest.js">
</script>
<script type="text/javascript"
src="/static/bundle.vendor.js">
</script>
<script type="text/javascript"
src="/static/bundle.salix.js">
</script>
<% for (let jsFile of assets('salix', ['vendor'])) { %>
<script type="text/javascript" src="<%= jsFile %>"></script>
<% } %>
</body>
</html>

68
webpack.config.js
View File

@ -1,20 +1,19 @@
require('require-yaml');
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const AssetsWebpackPlugin = require('assets-webpack-plugin');
const wpConfig = require('./webpack.config.yml');
var webpack = require('webpack');
var path = require('path');
let env = process.env.NODE_ENV ? process.env.NODE_ENV : 'development';
let devMode = env === 'development';
let outputPath = path.join(__dirname, wpConfig.buildDir);
var devMode = process.env.NODE_ENV !== 'production';
var config = {
entry: {
'bundle.salix': ['salix'],
'bundle.auth': ['auth'],
'bundle.vendor': ['vendor']
},
let baseConfig = {
entry: wpConfig.entry,
output: {
path: path.join(__dirname, './services/nginx/static'),
filename: '[name].js',
publicPath: '/static/',
chunkFilename: 'chunk.[name].[chunkhash].js'
path: outputPath,
publicPath: `${wpConfig.publicPath}/`
},
module: {
rules: [
@ -52,20 +51,41 @@ var config = {
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['bundle.vendor', 'bundle.manifest']
names: ['vendor', 'manifest']
})
],
devtool: 'source-map'
};
if (!devMode) {
let prodConfig = {
output: {
filename: '[name].[chunkhash].js',
chunkFilename: 'chunk.[id].[chunkhash].js'
},
plugins: [
// FIXME: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/132
// config.plugins.push(
// new webpack.optimize.UglifyJsPlugin({
// minimize: true,
// compress: {warnings: false}
// })
// );
}
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {warnings: false}
}),
new AssetsWebpackPlugin({
path: outputPath
}),
new webpack.HashedModuleIdsPlugin()
],
devtool: 'source-map'
};
module.exports = config;
let devConfig = {
output: {
filename: '[name].js',
chunkFilename: 'chunk.[id].js'
},
plugins: [
new webpack.NamedModulesPlugin()
],
devtool: 'eval'
};
let mrgConfig = devMode ? devConfig : prodConfig;
module.exports = merge(baseConfig, mrgConfig);