vue-cli 升级至 webpack 4 指北

时至今日(2018-7-11),vue-cli 任然未稳定支持至webpack4,因此我本身也来建立一个 vue 初始化模板
不过大体的缘由我也能猜到,由于不少插件仍然是一个不稳定的点,好比我在建立中也遇到了,至今未有解决的方案css

webpack 4 优势:

总结来讲就是 加快了 dev 模式下的编译速度,和 prod 模式下的打包速度
还有 optimize.CommonsChunkPlugin 会换成另外一种写法
还有一个比较小的优势,相信不少人都没说,就是他会压缩 es6 代码,也许不少人都会问🤔 咱们不是打包为es5的代码吗,为何要用到这个特性?html

这个缘由我会在后面几篇博客中说明(￣▽￣)"vue

修改过程

1.使用最新的 webpack

一键更新插件:node

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.jswebpack

若是你嫌麻烦,能够放在 webpack.base.conf.js 中git

将 插件:es6

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

改成:github

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

添加插件web

new VueLoaderPlugin()

删除全部 optimize.CommonsChunkPlugin 插件vue-cli

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 (╯▽╰)

如今插件还未稳定下来,若是喜欢折腾的话能够试试,否则仍是持观望为主,等官方升级为好😑