extract css for prod

f4312ca4 · Evan You · ef4aba2a · f4312ca4 · f4312ca4 · f4312ca4
Commit f4312ca4 authored Aug 04, 2016 by Evan You
8 changed files
--- a/.babelrc
+++ b/.babelrc
 {
-  "presets": ["es2015-webpack", "stage-2"]
+  "presets": ["es2015-webpack", "stage-2"],
+  "ignore": ["node_modules/*"]
 }
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
    "babel-preset-es2015-webpack": "^6.0.0",
    "babel-preset-stage-2": "^6.11.0",
    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "file-loader": "^0.8.4",
    "vue-loader": "^9.2.2",
    "webpack": "^2.1.0-beta.20",

--- a/server.js
+++ b/server.js
@@ -29,7 +29,6 @@ if (process.env.NODE_ENV !== 'production') {
  )

  const clientCompiler = webpack(clientConfig)
-
  app.use(require('webpack-dev-middleware')(clientCompiler, {
    publicPath: clientConfig.output.publicPath,
    stats: {
@@ -37,7 +36,6 @@ if (process.env.NODE_ENV !== 'production') {
      chunks: false
    }
  }))
-
  app.use(require('webpack-hot-middleware')(clientCompiler))

  // watch and update server renderer
@@ -71,6 +69,9 @@ app.get('*', (req, res) => {
  <head>
    <meta charset="utf-8">
    <title>vue-hackernews-2.0</title>
+    ${process.env.NODE_ENV === 'production'
+      ? `<link rel="stylesheet" href="/dist/styles.css">`
+      : ``}
  </head>
  <body>`)


--- a/src/App.vue
+++ b/src/App.vue
 <template>
  <div id="app">
+    <div class="header">
+      <img class="logo" src="./assets/logo.png">
+    </div>
    <ul>
      <li><router-link to="/news/1">page 1</router-link></li>
      <li><router-link to="/news/2">page 2</router-link></li>
@@ -13,7 +16,10 @@

 <style>
 body {
-  font-family: Helvetica, sans-serif;
+  font-family: Roboto, Helvetica, sans-serif;
+}
+.logo {
+  width: 30px;
 }
 .view {
  transition: all .35s ease;

--- a/src/components/NewsItem.vue
+++ b/src/components/NewsItem.vue
+<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>
--- a/src/server-entry.js
+++ b/src/server-entry.js
 import { app, router, store } from './app'

 export default context => {
-  // set router's initial location
-  router.setInitialLocation(context.url)
-  // resolve store state
+  // When using vue-router, it will automatically pick up the url from the
+  // context. We just need to resolve the store state.
  var s = Date.now()
  return Promise.all(router.getMatchedComponents().map(component => {
    if (component.prefetch) {
@@ -11,6 +10,8 @@ export default context => {
    }
  })).then(() => {
    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
    return app
  })

--- a/src/views/News.vue
+++ b/src/views/News.vue
@@ -3,15 +3,16 @@
    <h2>News</h2>
    <transition :name="transition">
      <ul class="news-list" :key="$route.params.page">
-        <li v-for="item in news" :key="item.id">
-          {{ item.title }}
-        </li>
+        <news-item v-for="item in news" :key="item.id" :item="item">
+        </news-item>
      </ul>
    </transition>
  </div>
 </template>

 <script>
+import NewsItem from '../components/NewsItem.vue'
+
 const fetchData = store => {
  return store
    .dispatch(`FETCH_TOP_IDS`)
@@ -21,11 +22,19 @@ const fetchData = store => {
 export default {
  name: 'news',
  prefetch: fetchData,
+  components: {
+    NewsItem
+  },
  data () {
    return {
      transition: 'slide-left'
    }
  },
+  computed: {
+    news () {
+      return this.$store.getters.news
+    }
+  },
  created () {
    if (typeof window !== 'undefined') {
      fetchData(this.$store)
@@ -38,11 +47,6 @@ export default {
        ? 'slide-left'
        : 'slide-right'
    }
-  },
-  computed: {
-    news () {
-      return this.$store.getters.news
-    }
  }
 }
 </script>

--- a/webpack.client.config.js
+++ b/webpack.client.config.js
@@ -38,6 +38,7 @@ module.exports = {
    noInfo: true
  },
  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    })
@@ -45,11 +46,23 @@ module.exports = {
 }

 if (process.env.NODE_ENV === 'production' && process.env.VUE_ENV !== 'server') {
-  // module.exports.plugins = module.exports.plugins.concat([
-  //   new webpack.optimize.UglifyJsPlugin({
-  //     compress: {
-  //       warnings: false
-  //     }
-  //   })
-  // ])
+  const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+  module.exports.vue = {
+    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
+      }
+    })
+  ])
 }