Skip to content

Commit 0f33f3b

Browse files
yyx990803yyx990803
committed
Merge branch 'client-manifest'
2 parents 4347748 + 99b84e2 commit 0f33f3b

32 files changed

+933
-791
lines changed

‎build/setup-dev-server.js

+22-12
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,14 @@ const clientConfig = require('./webpack.client.config')
55
const serverConfig = require('./webpack.server.config')
66

77
module.exports = function setupDevServer (app, cb) {
8-
let bundle
9-
let template
8+
let bundle, clientManifest
9+
let resolve
10+
let resolved = false
11+
const readyPromise = new Promise(r => { resolve = r })
12+
const ready = (...args) => {
13+
if (!resolved) resolve()
14+
cb(...args)
15+
}
1016

1117
// modify client config to work with hot middleware
1218
clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
@@ -25,12 +31,12 @@ module.exports = function setupDevServer (app, cb) {
2531
app.use(devMiddleware)
2632
clientCompiler.plugin('done', () => {
2733
const fs = devMiddleware.fileSystem
28-
const filePath = path.join(clientConfig.output.path, 'index.html')
29-
if (fs.existsSync(filePath)) {
30-
template = fs.readFileSync(filePath, 'utf-8')
31-
if (bundle) {
32-
cb(bundle, template)
33-
}
34+
const readFile = file => fs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')
35+
clientManifest = JSON.parse(readFile('vue-ssr-client-manifest.json'))
36+
if (bundle) {
37+
ready(bundle, {
38+
clientManifest
39+
})
3440
}
3541
})
3642

@@ -46,12 +52,16 @@ module.exports = function setupDevServer (app, cb) {
4652
stats = stats.toJson()
4753
stats.errors.forEach(err => console.error(err))
4854
stats.warnings.forEach(err => console.warn(err))
55+
const readFile = file => mfs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')
4956

5057
// read bundle generated by vue-ssr-webpack-plugin
51-
const bundlePath = path.join(serverConfig.output.path, 'vue-ssr-bundle.json')
52-
bundle = JSON.parse(mfs.readFileSync(bundlePath, 'utf-8'))
53-
if (template) {
54-
cb(bundle, template)
58+
bundle = JSON.parse(readFile('vue-ssr-server-bundle.json'))
59+
if (clientManifest) {
60+
ready(bundle, {
61+
clientManifest
62+
})
5563
}
5664
})
65+
66+
return readyPromise
5767
}

‎build/vue-loader.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = {
2+
extractCSS: process.env.NODE_ENV === 'production',
23
preserveWhitespace: false,
34
postcss: [
45
require('autoprefixer')({

‎build/webpack.base.config.js

+24-16
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
11
const path = require('path')
2+
const webpack = require('webpack')
23
const vueConfig = require('./vue-loader.config')
4+
const ExtractTextPlugin = require('extract-text-webpack-plugin')
35
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
46

57
const isProd = process.env.NODE_ENV === 'production'
68

79
module.exports = {
810
devtool: isProd
911
? false
10-
: '#cheap-module-eval-source-map',
11-
entry: {
12-
app: './src/entry-client.js',
13-
vendor: [
14-
'es6-promise/auto',
15-
'firebase/app',
16-
'firebase/database',
17-
'vue',
18-
'vue-router',
19-
'vuex',
20-
'vuex-router-sync'
21-
]
22-
},
12+
: '#cheap-module-source-map',
2313
output: {
2414
path: path.resolve(__dirname, '../dist'),
2515
publicPath: '/dist/',
@@ -53,14 +43,32 @@ module.exports = {
5343
limit: 10000,
5444
name: '[name].[ext]?[hash]'
5545
}
46+
},
47+
{
48+
test: /\.css$/,
49+
use: isProd
50+
? ExtractTextPlugin.extract({
51+
use: 'css-loader?minimize',
52+
fallback: 'vue-style-loader'
53+
})
54+
: ['vue-style-loader', 'css-loader']
5655
}
5756
]
5857
},
5958
performance: {
6059
maxEntrypointSize: 300000,
6160
hints: isProd ? 'warning' : false
6261
},
63-
plugins: isProd ? [] : [
64-
new FriendlyErrorsPlugin()
65-
]
62+
plugins: isProd
63+
? [
64+
new webpack.optimize.UglifyJsPlugin({
65+
compress: { warnings: false }
66+
}),
67+
new ExtractTextPlugin({
68+
filename: 'common.[chunkhash].css'
69+
})
70+
]
71+
: [
72+
new FriendlyErrorsPlugin()
73+
]
6674
}

‎build/webpack.client.config.js

+20-12
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
const webpack = require('webpack')
22
const merge = require('webpack-merge')
33
const base = require('./webpack.base.config')
4-
const HTMLPlugin = require('html-webpack-plugin')
54
const SWPrecachePlugin = require('sw-precache-webpack-plugin')
5+
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
66

77
const config = merge(base, {
8+
entry: {
9+
app: './src/entry-client.js'
10+
},
811
resolve: {
912
alias: {
1013
'create-api': './create-api-client.js'
@@ -18,23 +21,28 @@ const config = merge(base, {
1821
}),
1922
// extract vendor chunks for better caching
2023
new webpack.optimize.CommonsChunkPlugin({
21-
name: ['vendor', 'manifest']
24+
name: 'vendor',
25+
minChunks: function (module) {
26+
// a module is extracted into the vendor chunk if...
27+
return (
28+
// it's inside node_modules
29+
/node_modules/.test(module.context) &&
30+
// and not a CSS file (due to extract-text-webpack-plugin limitation)
31+
!/\.css$/.test(module.request)
32+
)
33+
}
2234
}),
23-
// generate output HTML
24-
new HTMLPlugin({
25-
template: 'src/index.template.html'
26-
})
35+
// extract webpack runtime & manifest to avoid vendor chunk hash changing
36+
// on every build.
37+
new webpack.optimize.CommonsChunkPlugin({
38+
name: 'manifest'
39+
}),
40+
new VueSSRClientPlugin()
2741
]
2842
})
2943

3044
if (process.env.NODE_ENV === 'production') {
3145
config.plugins.push(
32-
// minify JS
33-
new webpack.optimize.UglifyJsPlugin({
34-
compress: {
35-
warnings: false
36-
}
37-
}),
3846
// auto generate service worker
3947
new SWPrecachePlugin({
4048
cacheId: 'vue-hn',

‎build/webpack.server.config.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
const webpack = require('webpack')
22
const merge = require('webpack-merge')
33
const base = require('./webpack.base.config')
4-
const VueSSRPlugin = require('vue-ssr-webpack-plugin')
4+
const nodeExternals = require('webpack-node-externals')
5+
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
56

67
module.exports = merge(base, {
78
target: 'node',
@@ -16,12 +17,17 @@ module.exports = merge(base, {
1617
'create-api': './create-api-server.js'
1718
}
1819
},
19-
externals: Object.keys(require('../package.json').dependencies),
20+
// https://webpack.js.org/configuration/externals/#externals
21+
// https://github.com/liady/webpack-node-externals
22+
externals: nodeExternals({
23+
// do not externalize CSS files in case we need to import it from a dep
24+
whitelist: /\.css$/
25+
}),
2026
plugins: [
2127
new webpack.DefinePlugin({
2228
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
2329
'process.env.VUE_ENV': '"server"'
2430
}),
25-
new VueSSRPlugin()
31+
new VueSSRServerPlugin()
2632
]
2733
})

‎package.json

+15-15
Original file line numberDiff line numberDiff line change
@@ -16,38 +16,38 @@
1616
},
1717
"dependencies": {
1818
"compression": "^1.6.2",
19-
"cross-env": "^3.2.4",
19+
"cross-env": "^4.0.0",
2020
"es6-promise": "^4.1.0",
2121
"express": "^4.15.2",
22+
"extract-text-webpack-plugin": "^2.1.0",
2223
"firebase": "^3.7.2",
2324
"lru-cache": "^4.0.2",
2425
"serve-favicon": "^2.4.1",
25-
"vue": "^2.2.4",
26-
"vue-router": "^2.3.0",
27-
"vue-server-renderer": "^2.2.4",
28-
"vue-style-loader": "^2.0.4",
29-
"vuex": "^2.2.1",
30-
"vuex-router-sync": "^4.1.2",
31-
"webpack-merge": "^4.0.0"
26+
"vue": "^2.3.0-beta.1",
27+
"vue-router": "^2.5.0",
28+
"vue-server-renderer": "^2.3.0-beta.1",
29+
"vuex": "^2.3.1",
30+
"vuex-router-sync": "^4.1.2"
3231
},
3332
"devDependencies": {
3433
"autoprefixer": "^6.7.7",
3534
"buble": "^0.15.2",
3635
"buble-loader": "^0.4.1",
37-
"css-loader": "^0.27.3",
38-
"file-loader": "^0.10.1",
36+
"css-loader": "^0.28.0",
37+
"file-loader": "^0.11.1",
3938
"friendly-errors-webpack-plugin": "^1.6.1",
40-
"html-webpack-plugin": "^2.28.0",
4139
"rimraf": "^2.6.1",
4240
"stylus": "^0.54.5",
4341
"stylus-loader": "^3.0.1",
4442
"sw-precache-webpack-plugin": "^0.9.1",
4543
"url-loader": "^0.5.8",
46-
"vue-loader": "^11.1.4",
47-
"vue-ssr-webpack-plugin": "^1.0.2",
48-
"vue-template-compiler": "^2.2.4",
44+
"vue-loader": "^12.0.0",
45+
"vue-style-loader": "^3.0.0",
46+
"vue-template-compiler": "^2.3.0-beta.1",
4947
"webpack": "^2.2.1",
48+
"webpack-merge": "^4.0.0",
5049
"webpack-dev-middleware": "^1.10.1",
51-
"webpack-hot-middleware": "^2.17.1"
50+
"webpack-hot-middleware": "^2.17.1",
51+
"webpack-node-externals": "^1.5.4"
5252
}
5353
}

0 commit comments

Comments
 (0)