<style lang="sass">
 /* write Sass! */
</style>

npm install -g @vue/cli
vue create hello-world
cd hello-world
npm run serve

npm install extract-text-webpack-plugin --save-dev

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
 // other options...
 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
     extractCSS: true
    }
   }
  ]
 },
 plugins: [
  new ExtractTextPlugin("style.css")
 ]
}

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
 // other options...
 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
     loaders: {
      css: ExtractTextPlugin.extract({
       use: 'css-loader',
       fallback: 'vue-style-loader' // 这是vue-loader的依赖
      })
     }
    }
   }
  ]
 },
 plugins: [
  new ExtractTextPlugin("style.css")
 ]
}

// webpack.config.js
module.exports = {
 // ... other options
 plugins: [
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin()
 ]
}

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

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

module.exports = {
 devtool: isProd
  "htmlcode">

const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const SWPrecachePlugin = require('sw-precache-webpack-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

const config = merge(base, {
 entry: {
  app: './src/entry-client.js'
 },
 resolve: {
  alias: {
   'create-api': './create-api-client.js'
  }
 },
 plugins: [
  // strip dev-only code in Vue source
  new webpack.DefinePlugin({
   'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
   'process.env.VUE_ENV': '"client"'
  }),
  // extract vendor chunks for better caching
  new webpack.optimize.CommonsChunkPlugin({
   name: 'vendor',
   minChunks: function (module) {
    // a module is extracted into the vendor chunk if...
    return (
     // it's inside node_modules
     /node_modules/.test(module.context) &&
     // and not a CSS file (due to extract-text-webpack-plugin limitation)
     !/\.css$/.test(module.request)
    )
   }
  }),
  // extract webpack runtime & manifest to avoid vendor chunk hash changing
  // on every build.
  new webpack.optimize.CommonsChunkPlugin({
   name: 'manifest'
  }),
  new VueSSRClientPlugin()
 ]
})

if (process.env.NODE_ENV === 'production') {
 config.plugins.push(
  // auto generate service worker
  new SWPrecachePlugin({
   cacheId: 'vue-hn',
   filename: 'service-worker.js',
   minify: true,
   dontCacheBustUrlsMatching: /./,
   staticFileGlobsIgnorePatterns: [/\.map$/, /\.json$/],
   runtimeCaching: [
    {
     urlPattern: '/',
     handler: 'networkFirst'
    },
    {
     urlPattern: /\/(top|new|show|ask|jobs)/,
     handler: 'networkFirst'
    },
    {
     urlPattern: '/item/:id',
     handler: 'networkFirst'
    },
    {
     urlPattern: '/user/:id',
     handler: 'networkFirst'
    }
   ]
  })
 )
}

module.exports = config


最后来看看开发环境中的webpack.server.config.js的配置是怎么写的：


const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(base, {
 target: 'node',
 devtool: '#source-map',
 entry: './src/entry-server.js',
 output: {
  filename: 'server-bundle.js',
  libraryTarget: 'commonjs2'
 },
 resolve: {
  alias: {
   'create-api': './create-api-server.js'
  }
 },
 // https://webpack.js.org/configuration/externals/#externals
 // https://github.com/liady/webpack-node-externals
 externals: nodeExternals({
  // do not externalize CSS files in case we need to import it from a dep
  whitelist: /\.css$/
 }),
 plugins: [
  new webpack.DefinePlugin({
   'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
   'process.env.VUE_ENV': '"server"'
  }),
  new VueSSRServerPlugin()
 ]
})


如何进行代码检验
你可能有疑问，在 .vue 文件中你怎么检验你的代码，因为它不是 JavaScript。我们假设你使用 ESLint (如果你没有使用话，你应该去使用！)。
首先你要去安装eslint-loader:


npm install eslint eslint-loader --save-dev


然后将它应用在pre-loader上：


// webpack.config.js
module.exports = {
 // ... other options
 module: {
  rules: [
   {
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/
   }
  ]
 }
}


这样你的 .vue 文件会在开发期间每次保存时自动检验。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。