记在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目前没找到解决的方法，有知道同学望告知。
项目地址，项目中采用的服务端路由缓存，以及客户端application和service-work缓存技术，有时间我整理一个学习笔记。有喜欢的同学，欢迎start，欢迎讨论，无时不在。
ssr学习笔记，记录一些对ssr学习时的理解，欢迎讨论。
如果你用的是vue，想要对ts的支持好一点，还是用最新的vue-cli 3.0，以及期待下下半年的vue 3.0。