Skip to content

N
node-sample
Commit f4312ca4 authored by Evan You's avatar Evan You
Browse files
Options

extract css for prod

parent ef4aba2a
Show whitespace changes
Inline Side-by-side
Showing with 60 additions and 22 deletions
.babelrc
View file @ f4312ca4
{ {
"presets": ["es2015-webpack", "stage-2"] "presets": ["es2015-webpack", "stage-2"],
"ignore": ["node_modules/*"]
} }
package.json
View file @ f4312ca4
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
"babel-preset-es2015-webpack": "^6.0.0", "babel-preset-es2015-webpack": "^6.0.0",
"babel-preset-stage-2": "^6.11.0", "babel-preset-stage-2": "^6.11.0",
"css-loader": "^0.23.1", "css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"file-loader": "^0.8.4", "file-loader": "^0.8.4",
"vue-loader": "^9.2.2", "vue-loader": "^9.2.2",
"webpack": "^2.1.0-beta.20", "webpack": "^2.1.0-beta.20",
......
server.js
View file @ f4312ca4
...@@ -29,7 +29,6 @@ if (process.env.NODE_ENV !== 'production') { ...@@ -29,7 +29,6 @@ if (process.env.NODE_ENV !== 'production') {
) )
const clientCompiler = webpack(clientConfig) const clientCompiler = webpack(clientConfig)
app.use(require('webpack-dev-middleware')(clientCompiler, { app.use(require('webpack-dev-middleware')(clientCompiler, {
publicPath: clientConfig.output.publicPath, publicPath: clientConfig.output.publicPath,
stats: { stats: {
...@@ -37,7 +36,6 @@ if (process.env.NODE_ENV !== 'production') { ...@@ -37,7 +36,6 @@ if (process.env.NODE_ENV !== 'production') {
chunks: false chunks: false
} }
})) }))
app.use(require('webpack-hot-middleware')(clientCompiler)) app.use(require('webpack-hot-middleware')(clientCompiler))
// watch and update server renderer // watch and update server renderer
...@@ -71,6 +69,9 @@ app.get('*', (req, res) => { ...@@ -71,6 +69,9 @@ app.get('*', (req, res) => {
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>vue-hackernews-2.0</title> <title>vue-hackernews-2.0</title>
${process.env.NODE_ENV === 'production'
? `<link rel="stylesheet" href="/dist/styles.css">`
: ``}
</head> </head>
<body>`) <body>`)
......
src/App.vue
View file @ f4312ca4
<template> <template>
<div id="app"> <div id="app">
<div class="header">
<img class="logo" src="./assets/logo.png">
</div>
<ul> <ul>
<li><router-link to="/news/1">page 1</router-link></li> <li><router-link to="/news/1">page 1</router-link></li>
<li><router-link to="/news/2">page 2</router-link></li> <li><router-link to="/news/2">page 2</router-link></li>
...@@ -13,7 +16,10 @@ ...@@ -13,7 +16,10 @@
<style> <style>
body { body {
font-family: Helvetica, sans-serif; font-family: Roboto, Helvetica, sans-serif;
}
.logo {
width: 30px;
} }
.view { .view {
transition: all .35s ease; transition: all .35s ease;
......
src/components/NewsItem.vue 0 → 100644
View file @ f4312ca4
<template>
<li class="news-item">{{ item.title }}</li>
</template>
<script>
export default {
name: 'NewsItem',
props: ['item'],
serverCacheKey: ({ item }) => `${item.id}:${item.score}:${item.descendents}`
}
</script>
src/server-entry.js
View file @ f4312ca4
import { app, router, store } from './app' import { app, router, store } from './app'
export default context => { export default context => {
// set router's initial location // When using vue-router, it will automatically pick up the url from the
router.setInitialLocation(context.url) // context. We just need to resolve the store state.
// resolve store state
var s = Date.now() var s = Date.now()
return Promise.all(router.getMatchedComponents().map(component => { return Promise.all(router.getMatchedComponents().map(component => {
if (component.prefetch) { if (component.prefetch) {
...@@ -11,6 +10,8 @@ export default context => { ...@@ -11,6 +10,8 @@ export default context => {
} }
})).then(() => { })).then(() => {
console.log(`data pre-fetch: ${Date.now() - s}ms`) console.log(`data pre-fetch: ${Date.now() - s}ms`)
// set initial store on context
// the request handler will inline the state in the HTML response.
context.initialState = store.state context.initialState = store.state
return app return app
}) })
......
src/views/News.vue
View file @ f4312ca4
...@@ -3,15 +3,16 @@ ...@@ -3,15 +3,16 @@
<h2>News</h2> <h2>News</h2>
<transition :name="transition"> <transition :name="transition">
<ul class="news-list" :key="$route.params.page"> <ul class="news-list" :key="$route.params.page">
<li v-for="item in news" :key="item.id"> <news-item v-for="item in news" :key="item.id" :item="item">
{{ item.title }} </news-item>
</li>
</ul> </ul>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
import NewsItem from '../components/NewsItem.vue'
const fetchData = store => { const fetchData = store => {
return store return store
.dispatch(`FETCH_TOP_IDS`) .dispatch(`FETCH_TOP_IDS`)
...@@ -21,11 +22,19 @@ const fetchData = store => { ...@@ -21,11 +22,19 @@ const fetchData = store => {
export default { export default {
name: 'news', name: 'news',
prefetch: fetchData, prefetch: fetchData,
components: {
NewsItem
},
data () { data () {
return { return {
transition: 'slide-left' transition: 'slide-left'
} }
}, },
computed: {
news () {
return this.$store.getters.news
}
},
created () { created () {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
fetchData(this.$store) fetchData(this.$store)
...@@ -38,11 +47,6 @@ export default { ...@@ -38,11 +47,6 @@ export default {
? 'slide-left' ? 'slide-left'
: 'slide-right' : 'slide-right'
} }
},
computed: {
news () {
return this.$store.getters.news
}
} }
} }
</script> </script>
......
webpack.client.config.js
View file @ f4312ca4
...@@ -38,6 +38,7 @@ module.exports = { ...@@ -38,6 +38,7 @@ module.exports = {
noInfo: true noInfo: true
}, },
plugins: [ plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}) })
...@@ -45,11 +46,23 @@ module.exports = { ...@@ -45,11 +46,23 @@ module.exports = {
} }
if (process.env.NODE_ENV === 'production' && process.env.VUE_ENV !== 'server') { if (process.env.NODE_ENV === 'production' && process.env.VUE_ENV !== 'server') {
// module.exports.plugins = module.exports.plugins.concat([ const ExtractTextPlugin = require('extract-text-webpack-plugin')
// new webpack.optimize.UglifyJsPlugin({
// compress: { module.exports.vue = {
// warnings: false loaders: {
// } css: ExtractTextPlugin.extract({
// }) loader: "css-loader",
// ]) fallbackLoader: "vue-style-loader"
})
}
}
module.exports.plugins = module.exports.plugins.concat([
new ExtractTextPlugin('styles.css'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment