vue webpak版本 查看_vue-cli webpack 项目版本升级
包含 webpack@4 和 babel-loader@8 以及打包部分优化
一键升级package.json 文件 依赖版本数
手动去修改dependencies中各个包的版本号太慢，
so 借助了npm-check-updates工具，一键将package.json中的依赖包版本号更新为最新版本。
1、global install npm install -g npm-check-updates
2、cd 项目目录 查看package.json中dependencies的最新版本 ncu
3、更新package.json中dependencies ncu -u
ok package.json中dependencies 就到最新版本了
but 注意版本之间的依赖适配
版本升级
1、webpack@4版本升级
webpack，webpack-cli， webpack-merge， webpack-bundle-analyzer这几个升级
"webpack": "^3.6.0" -> "^4.29.6"
"webpack-bundle-analyzer": "^2.9.0" -> "^3.1.0"
"webpack-cli": "^3.2.1" -> "^3.3.0"
"webpack-dev-server": "^2.9.7" -> "^4.2.1"
复制代码
注意 webpack@4 不支持提取css文件的extract-text-webpack-plugin插件 更换成 mini-css-extract-plugin
相应配置更换
build/util.js
1、
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
复制代码2、
// return ExtractTextPlugin.extract({
// use: loaders,
// fallback: 'vue-style-loader',
// publicPath: '../../'
// })
return [MiniCssExtractPlugin.loader].concat(loaders)
复制代码
build/webpack.prod.conf.js
const { VueLoaderPlugin } = require('vue-loader')
plugins: [ new VueLoaderPlugin() ]
复制代码
build/webpack.prod.conf.js
1、
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
复制代码2、plugins 中 new ExtractTextPlugin({ }) 去掉 更换成
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
chunkFilename: utils.assetsPath('css/[name].[contenthash].css'),
allChunks: true
})
#注意如果build出来的css背景图片路径不正确 可在 base.conf.js中配置一下rules关于图片的配置
#加上options:[ publicPath: '../../'(相应文件路径)]
复制代码3、CommonsChunkPlugin 的改变 它是提取第三方库和公共模块，减少首屏加载的bundle文件或者按需加载的bundle文件体积和时间
去掉new webpack.optimize.CommonsChunkPlugin({}) 更换成
optimization: {
// 代码分割
splitChunks: {
chunks: 'async',
minSize: 30000, //模块大于30k会被抽离到公共模块
minChunks: 1, //模块出现1次就会被抽离到公共模块
maxAsyncRequests: 5, //异步模块，一次最多只能被加载5个
maxInitialRequests: 3, //入口模块最多只能加载3个
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
runtimeChunk: {
name: 'vendor'
},
}
复制代码4、 HtmlWebpackPlugin html文件生成的工具
new HtmlWebpackPlugin({
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
}
}) 中的 minifyg更换
minify: {
removeAttributeQuotes: true,
// 移除注释
removeComments: true,
// 不要留下任何空格
collapseWhitespace: true,
// 当值匹配默认值时删除属性
removeRedundantAttributes: true,
// 使用短的doctype替代doctype
useShortDoctype: true,
// 移除空属性
removeEmptyAttributes: true,
// 从style和link标签中删除type="text/css"
removeStyleLinkTypeAttributes: true,
// 保留单例元素的末尾斜杠。
keepClosingSlash: true,
// 在脚本元素和事件属性中缩小JavaScript(使用UglifyJS)
minifyJS: true,
// 缩小CSS样式元素和样式属性
minifyCSS: true,
// 在各种属性中缩小url
minifyURLs: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
}
复制代码
2、babel-loader@8 版本升级
babel-loader@8 要求@babel/core@7版本 so 相应更换版本
"babel-core": "^6.22.1" ->
"babel-eslint": "^8.2.6"
"babel-helper-vue-jsx-merge-props": "^2.0.3"
"babel-loader": "^7.1.1"
"babel-plugin-syntax-jsx": "^6.18.0"
"babel-plugin-transform-runtime": "^6.22.0"
"babel-plugin-transform-vue-jsx": "^3.5.0"
"babel-preset-env": "^1.3.2"
复制代码"@babel/core": "^7.4.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/runtime": "^7.4.2",
"babel-eslint": "^10.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^8.0.4",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-runtime": "^6.26.0",
复制代码
隐藏文件 .babelrc 更换可以为
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime",
"transform-vue-jsx"
]
}
复制代码
3、打包部分优化
(1)、多进程happypack 打包
webpack.base.conf.js
const HappyPack = require('happypack')
// 构造出共享进程池，进程池中包含5个子进程
const happyThreadPool = HappyPack.ThreadPool({ size: 5})
复制代码rules
// 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
{
test: /\.js$/,
use: ['happypack/loader?id=babel'],
include: [
resolve('src'),
resolve('test')
]
}
// 把对 .css 文件的处理转交给 id 为 css 的 HappyPack 实例
{
test: /\.css$/,
use: ['happypack/loader?id=css'],
}
复制代码new HappyPack({
// 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件
id: 'babel',
// 如何处理.js文件，用法和Loader配置是一样的
loaders: ['babel-loader'],
// 使用共享进程池中的子进程去处理任务。
threadPool: happyThreadPool
}),
new HappyPack({
id: 'css',
// 如何处理 .css 文件，用法和 Loader 配置中一样
loaders: ['css-loader'],
threadPool: happyThreadPool,
})
复制代码
(2)、更换uglifyjs-webpack-plugin => webpack-parallel-uglify-plugin 打包
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
去掉new UglifyJsPlugin({}) 更换成
new ParallelUglifyPlugin({
include: ['node_modules/_element-ui@2.6.3@element-ui'],
// 传递给 UglifyJS 的参数
uglifyJS: {
output: {
// 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
},
compress: {
// 在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
// 删除所有的 `console` 语句，可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
}
},
})
复制代码
(3)、image-webpack-loader 压缩图片
cnpm i -D image-webpack-loader
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
// loader: 'url-loader',
exclude: [resolve('src/icons')],
use: [{
loader: 'url-loader',
options: {
publicPath: '../../',
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
loader: 'image-webpack-loader',
options: {
publicPath: '../../',
bypassOnDebug: true,
}
}
]
}
复制代码
总结
1、webpack升级， 引发各种依赖升级，各种loader升级； 不对应的依赖包使用就会 引发各种的 Cannot find module
2、webpack4 废除了很多api
代码块 webpack.optimize.CommonsChunkPlugin 被 optimization.splitChunks 取代
UglifyJsPlugin 被内置 只需optimization.minimize:true，production mode下面自动为true
3、happypack webpack-parallel-uglify-plugin 多进程打包