這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)如何在Vue項目中將webpack3.x升級到webpack4，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標準是產(chǎn)品質(zhì)量的保證，主要從事成都網(wǎng)站設(shè)計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)網(wǎng)站建設(shè)、成都手機網(wǎng)站制作、網(wǎng)頁設(shè)計、品牌網(wǎng)站設(shè)計、網(wǎng)頁制作、做網(wǎng)站、建網(wǎng)站。創(chuàng)新互聯(lián)擁有實力堅強的技術(shù)研發(fā)團隊及素養(yǎng)的視覺設(shè)計專才。

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

原先的環(huán)境

• 項目原先通過Vue-cli 2.9.3 版本構(gòu)建，原先使用的webpack 3.x版本

• 首先需要對基礎(chǔ)包進行更新(package.json)

• webpack 更新到4.x版本，泡面這里更新到了4.28.3

• 更新webpack-dev-server，泡面更新到了3.1.14版本,

• 安裝webpack-cli，泡面安裝的是3.2.1版本

除了上面的這幾個，還需要更新下面幾個：

• vue-loader 泡面直接升級到了15版本，

• eslint-loader 升級到了1.7.1,這個當時在做啟動的時候提示了一些錯誤,所以索性也就升級了.

• happypack, 泡面使用了多線程加速,所以這個也必須要升級,否則會報錯,泡面更新到了5.0.1

• html-webpack-plugin, 這個也需要更新,否則會提示錯誤,泡面這里升級到了3.2.0

除了上面幾個,還需要額外下載一個:

• mini-css-extract-plugin, 該包是要替換掉extract-text-webpack-plugin來使用,所以后者就遺棄掉了.

接著我們修改一下webpack.base.conf.js,沒有使用happypack的這步驟可略過...

泡面這里不知道為什么不能使用happypack來掛載vue-loader,否則會提示錯誤,所以泡面這里將原先的happypack的配置修改回了原先:

...
const vueLoaderConfig = require('./vue-loader.conf')
...
module.exports = {
 ...
  {
   test: /\.vue$/,
    // loader: 'happypack/loader?id=happy-vue'
    loader: 'vue-loader',
    options: vueLoaderConfig
  },
 ... 
}

接著來調(diào)整 webpack.dev.conf.js

首先在合并配置的地方引入mode

 ...
 // 開發(fā)環(huán)境引入
 mode: 'development',
 ...
 module: {
  ...
 }
 devServer: {
  ...
 }

webpack4需要手動引入vue-loader插件,因為泡面是從14版本升級到15版本,點我查看官方文檔,如何從 v14 遷移,所以這里需要引入:

...
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
module.export = {
 ...
 plugins: [
  ...
  // 引入vue-loader插件
  new VueLoaderPlugin(),
  ...
  // 同時,泡面注釋掉了vue-loader的happypack
  // new Happypack({
  //  id: 'happy-vue',
  //  loaders: [{
  //   loader: 'vue-loader',
  //   options: vueLoaderConfig
  //  }]
  // })
 ]
}

接著, 以下插件被廢棄掉了,直接注釋掉

• webpack.DefinePlugin

• webpack.NamedModulesPlugin

• webpack.NoEmitOnErrorsPlugin

ok, 這個文件就改完了.

接著來修改webpack.prod.conf.js

同開發(fā)環(huán)境,需要引入mode和vue-loader,一模一樣,所以這里不贅述了.

接著,我們需要在配置表里添加optimization選項:

...
output: { ...},
// 這里添加
optimization: {
  runtimeChunk: {
   name: 'manifest'
  },
  minimizer: [
   new UglifyJsPlugin({
    cache: true,
    parallel: true,
    sourceMap: config.build.productionSourceMap,
    uglifyOptions: {
     warnings: false
    }
   }),
   new OptimizeCSSPlugin({
   cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
  }),
  ],
  splitChunks:{
   chunks: 'async',
   minSize: 30000,
   minChunks: 1,
   maxAsyncRequests: 5,
   maxInitialRequests: 3,
   name: false,
   cacheGroups: {
    vendor: {
     name: 'vendor',
     chunks: 'initial',
     priority: -10,
     reuseExistingChunk: false,
     test: /node_modules\/(.*)\.js/
    },
    styles: {
     name: 'styles',
     test: /\.(scss|css)$/,
     chunks: 'all',
     minChunks: 1,
     reuseExistingChunk: true,
     enforce: true
    }
   }
  }
 },
 plugins: [...]

接著,我們需要引入mini-css-extract-plugin插件,并添加到插件里:

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: [
 ...
 new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
 }),
 ... 
]

然后, 我們需要把廢棄掉的插件注釋掉:

webpack.DefinePlugin
UglifyJsPlugin (放到optimization里了)
ExtractTextPlugin
OptimizeCSSPlugin (放到optimization里了)
CommonsChunkPlugin (所有的...)

ok, 至此該文件就調(diào)整完了.

最后一個utils.js

這里主要是需要添加mini-css-extract-plugin插件

...
// 注釋掉原來的插件
// 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)

ok, 大功告成! 至此webpack4的配置文件就全部修改完成了.

目前, 泡面至在此記錄流水賬,回頭性能測試再發(fā)文章記錄.

ps: 如果出現(xiàn)這種錯誤

error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

請重新安裝一下 vue-template-compiler

上述就是小編為大家分享的如何在Vue項目中將webpack3.x升級到webpack4了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：如何在Vue項目中將webpack3.x升級到webpack4
分享地址：http://chinadenli.net/article48/jhjjhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、軟件開發(fā)、微信公眾號、品牌網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)