vue-cli 升級至 webpack 4 指北

時至今日(2018-7-11),vue-cli 任然未穩定支持至webpack4,因此我本身也來建立一個 vue 初始化模板
不過大體的緣由我也能猜到,由於不少插件仍然是一個不穩定的點,好比我在建立中也遇到了,至今未有解決的方案

webpack 4 優勢:

總結來講就是 加快了 dev 模式下的編譯速度,和 prod 模式下的打包速度
還有 optimize.CommonsChunkPlugin 會換成另外一種寫法
還有一個比較小的優勢,相信不少人都沒說,就是他會壓縮 es6 代碼,也許不少人都會問🤔 咱們不是打包爲es5的代碼嗎,爲何要用到這個特性?

這個緣由我會在後面幾篇博客中說明(￣▽￣)"

修改過程

1.使用最新的 webpack

一鍵更新插件:

npm i -D webpack@4.15.1 vue-loader@15.2.4 mini-css-extract-plugin html-webpack-plugin@3.2.0 webpack-cli@3.0.8 webpack-dev-server@3.1.4

2.修改 webpack.prod.conf.js

去除 const ExtractTextPlugin = require('extract-text-webpack-plugin')
添加 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
添加 const VueLoaderPlugin = require('vue-loader/lib/plugin')
VueLoaderPlugin也要加在 webpack.dev.conf.js

若是你嫌麻煩,能夠放在 webpack.base.conf.js 中

將 插件:

new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: true,
})

改成:

new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
})

添加插件

new VueLoaderPlugin()

刪除全部 optimize.CommonsChunkPlugin 插件

new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    })

在 plugins 外部添加

optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all"
        },
        styles: {
          name:'styles',
          test: (m) => m.constructor.name === 'CssModule',
          chunks: 'all',
          minChunks: 1,
          enforce: true,
          euseExistingChunk: true
         }
      }
    },
    runtimeChunk: {
      name: "manifest"
    },
  }

3.修改build/utils.js

將
const ExtractTextPlugin = require('extract-text-webpack-plugin')
改成
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

大約48行左右:

if (options.extract) {
    return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
    })
  }

改成:

if (options.extract) {
    return [MiniCssExtractPlugin.loader].concat(loaders)
}

4.添加mode
在 webpack.dev.conf.js 中 添加 mode:'development',
一樣的在 webpack.prod.conf.js 中添加 mode: 'production',
具體可查看我以後給出的項目

build問題

question:

var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {

解決:

npm install html-webpack-plugin@3.2.0 --save-dev

---

question:

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

解決:

npm install --save-dev mini-css-extract-plugin

---

question:

Module build failed (from ./node_modules/vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined

解決: 引用新的vue-loader

npm i -D vue-loader@15.2.4

prod.js添加

const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [
    new VueLoaderPlugin()
  ]

其餘錯誤

如 eslint 報錯,則須要下載最新版本的eslint-loader
npm install eslint-loader@2.0.0 -D

還有須要注意的是 webpack.base.conf.js 中的 loader 後綴不可省略

---

pug報錯:
解決: 使用最新的 pug-html-loader

{
      test: /\.pug$/,
      loader: 'pug-html-loader'
}

警告

有關 postcss
解決:
npm i -D postcss-loader@2.1.5

---

(node:93005) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

該語句沒有太大影響,僅僅是提醒的做用

---

我剛剛在引言裏說的,至今未解決的問題,就在於異步組件塊的css 上
首先要清楚 如今css 也是和異步組件同樣的異步加載,除非插件更新,改變這種模式
可是,不少人都會以爲這種方法並非很好,想要將 css 文件合併成一個,缺無法合併
若是按我剛剛的配置來改,那麼改出來的確實是會將css 合併可是,他會有反作用 ---> 會產生一個無用的chunk文件,而且他不能被刪除,並且他會做爲入口文件之一

這個問題至今是仍然未解決,具體詳情能夠瀏覽該issue:
https://github.com/webpack-contrib/mini-css-extract-plugin/issues/113
放上個人項目地址,若是有須要能夠查看:
https://github.com/Grewer/vue-webpack4

---

總結一下,其實相對於有一點體量的項目來講,其實速度的加快並無多少
好比我以前項目常常是在30S左右,升級到webpack 4後,時間大概在25-32s左右
文件的壓縮有了一點效果,可是影響不是不少,好比以前 113K的文件 升級後 會壓縮大概至 109K (╯▽╰)

如今插件還未穩定下來,若是喜歡折騰的話能夠試試,否則仍是持觀望爲主,等官方升級爲好😑