最近抽了點時間弄了一下vue的服務端渲染(SSR)以及serviceWork和application的離線快取技術(PWA)，於是就拿了以前的老專案去重寫了，但是老的有點落伍了是基於vue-cli 2.0的，完全就是在webpack的基礎上加了個vue-loader，並沒有現在vue-cli 3.0那麼開箱即用。如果你用的是js，做ssr直接用vue的官方例項也沒什麼問題，那是基於webpack ^3.0的vue-cli 2.0。如果要用ts，就需要把webpack升級到4.0以上。但是4.0以後，所用到的打包外掛可謂是大換血，基本都要換掉，有點坑爹。

       下面一個一個來說吧。

MiniCssExtractPlugin

       壓縮css的外掛ExtractTextPlugin，需要替換成MiniCssExtractPlugin，這些外掛都可以通過npm install name  --save-dev，你如果想詳細瞭解可以去webpack官網，github倉庫，npm包官網都可以搜尋到。但是坑比的是服務端渲染還不能用(document is no defined)，這裡也是需要注意的點，千萬不要在服務端和客戶端都能觸發的鉤子中操作dom，比如created，asyncData。所以不能像之前那樣寫在base.config裡面了，也就是服務端不能使用，下面貼下我改裝吧。

// webpack.client.config
module: {
    rules: [
      {
        test: /\.(sa|sc|c|le)ss$/,
        use: [
          isProd ? { loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: './css'
            }
          }: 'vue-style-loader',
          'css-loader',
          'less-loader',
        ],
      }
    ]
  },
 plugins: [new MiniCssExtractPlugin({
      filename: 'css/common.[chunkhash].css'
 })]
 

SplitChunksPlugin和RuntimeChunkPlugin

      程式碼分割CommonsChunkPlugin要升級為SplitChunksPlugin和RuntimeChunkPlugin，這些在webpack.optimize上的外掛使用起來也比較隨意，你可以通過一下兩種形式去使用。如果你使用了optimization這種形式，那麼你就可以不用在去用壓縮，因為新的壓縮js外掛是自帶的，接下來就會講到。

// webpack.client.config.js
Plugin: [
    new webpack.optimize.RuntimeChunkPlugin({
      name: "manifest"
    }),
    new webpack.optimize.SplitChunksPlugin({
        cacheGroups: {
        //打包重複出現的程式碼
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          name: 'vendor'
        },
        //打包第三方類庫
        commons: {
            name: "commons",
            chunks: "initial",
            minChunks: Infinity
        }
        }
    }),
    new webpack.optimize.RuntimeChunkPlugin({
       name: "manifest"
    }),
]
// 或者與Plugin同級
optimization: {   
    splitChunks: {
      cacheGroups: {
        //打包重複出現的程式碼
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          name: 'vendor'
        },
        //打包第三方類庫
        commons: {
          name: "commons",
          chunks: "initial",
          minChunks: Infinity
        }
      }
    },
    // 為每個入口提取出webpack runtime模組     
    runtimeChunk: {
        name: 'manifest'
    }
  },

UglifyJsPlugin

      之前用來壓縮js程式碼的webpack.optimize.UglifyJsPlugin也不能用了，可以直接刪除，因為新的webpack自帶壓縮功能，就像面提到的那樣，minimize預設值是ture。但是看下了下它打包出來的大小，還是沒有UglifyJsPlugin外掛壓縮的徹底，所以我選擇用了UglifyJsPlugin。

optimization: {
    minimize: true
}

plugins:[
  new UglifyJsPlugin()
]

就算全部升級到最新外掛後，跑dev還是會出現問題

(node:6512) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

 目前沒找到解決的方法，有知道同學望告知。

如果你用的是vue，想要對ts的支援好一點，還是用最新的vue-cli 3.0，以及期待下下半年的vue 3.0。