记在vue-cli 2.0中使用typescript，从webpack ^3.0到^4.0的自杀式升级。

最近抽了点时间弄了一下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。