vue-cli webpack 项目版本升级

包含 webpack@4 和 babel-loader@8 以及打包部分优化

一键升级package.json 文件 依赖版本数

手动去修改dependencies中各个包的版本号太慢,css

so 借助了npm-check-updates工具,一键将package.json中的依赖包版本号更新为最新版本。html

一、global install npm install -g npm-check-updatesvue

二、cd 项目目录 查看package.json中dependencies的最新版本 ncunode

三、更新package.json中dependencies ncu -uwebpack

ok package.json中dependencies 就到最新版本了git

but 注意版本之间的依赖适配

版本升级

一、webpack@4版本升级github

webpack,webpack-cli, webpack-merge, webpack-bundle-analyzer这几个升级web

"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

相应配置更换npm

build/util.js
一、
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

复制代码
二、
// return ExtractTextPlugin.extract({
//     use: loaders,
//     fallback: 'vue-style-loader',
//     publicPath: '../../'
// })
return [MiniCssExtractPlugin.loader].concat(loaders)

复制代码

build/webpack.prod.conf.jselement-ui

const { VueLoaderPlugin } = require('vue-loader')
plugins: [ new VueLoaderPlugin() ]
复制代码

build/webpack.prod.conf.js

一、
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

复制代码
二、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: '../../'(相应文件路径)]
复制代码
三、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'
    },
}

复制代码
四、 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
}
复制代码

二、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"
  ]
}
复制代码

三、打包部分优化

(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,
            }
        }
    ]
}
复制代码

总结

一、webpack升级, 引起各类依赖升级,各类loader升级; 不对应的依赖包使用就会 引起各类的 Cannot find module

二、webpack4 废除了不少api 代码块 webpack.optimize.CommonsChunkPlugin 被 optimization.splitChunks 取代 UglifyJsPlugin 被内置 只需optimization.minimize:true,production mode下面自动为true

三、happypack webpack-parallel-uglify-plugin 多进程打包

传送门 webpack 深刻浅出.

相关文章
相关标签/搜索