vue-cli webpack 項目版本升級

時間  2019-12-01
標籤 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 深刻淺出.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程