Vue项目升级webpack4.x和遇到的那些安装包Error

栏目: 编程语言 · 发布时间: 5年前

内容简介:webpack版本:3.6.0五次打包所需时间:83.57s、78.71s、77.08s、78.07s、92.22s五次打包所需时间:71.44s、37.54s、30.05s、30.50s、32.68s.

升级前

webpack版本:3.6.0

五次打包所需时间:83.57s、78.71s、77.08s、78.07s、92.22s

升级后

五次打包所需时间:71.44s、37.54s、30.05s、30.50s、32.68s.

开始升级

一. 升级webpack到4.x

同时还需升级:

$ yarn add webpack
$ yarn add webpack-cli
$ yarn add webpack-dev-server
复制代码

二.升级vue-loader

  • 如果在 yarn dev/yarn build 时出现以下Error:

    Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    复制代码

    解决方法:是vue版本与vue-template-compiler不一致。升级vue版本试试

  • 将vue-loader引入webpack配置

    // 文件: wepack.base.conf.js 
    
    + const { VueLoaderPlugin } = require('vue-loader')
    
    + module.exports = {
    	....,
    	plugins:[
    		new VueLoaderPlugin()
    	]
    }
    复制代码

三.使用 mini-css-extract-plugin 来提取css

// 文件:wepack.prod.conf.js
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin')

+ new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[name].[contenthash:8].css'),
  chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
})
复制代码

四.升级vue-router

由于 vue-loader@13.0.0 版本中对模块导入做了更新,为了支持 Webpack3 中的 Scope Hoisting 属性,esModule 被默认设置为了 true,如果你之前用到require来导入*.vue文件,请注意:

const Foo = require('./Foo.vue')
// 需要改为
const Foo = require('./Foo.vue').default

// 或者直接使用
const Foo = import('./Foo.vue')
复制代码

在低于 Vue 2.4 和 vue-router 2.7 的版本中,import 语法需要修改为:

const Foo = () => import('./Foo.vue')
// 需要改为
const Foo = () => import('./Foo.vue').then(m => m.default)
复制代码

五.关于使用 import('./Foo.vue') 导入模块所面临的问题【参考】

  • 由于webpack的import实现机制,会将其他的.vue文件打包,导致开发环境的热更新变的比较慢
  • 所以要区分开发环境和生产环境。开发环境使用 require ,生产环境使用 import

使用babel 的 plugins:babel-plugin-dynamic-import-node。它可以将所有的import()转化为require()。

// 首先先安装
yarn add cross-env babel-plugin-dynamic-import-node -D
复制代码

cross-env 包能够提供一个设置环境变量的scripts,能跨平台地设置及使用环境变量。

  • package.json 中增加 BABEL_ENV

    "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
    复制代码
  • .babelrc 文件中加入 babel-plugin-dynamic-import-node

    {   
     "env": { 
       "development": {
         "plugins": ["dynamic-import-node"]
       }
     }
    }
    复制代码

六.其他关于依赖升级后遇到的问题

autoprefixer 版本引起的warning

Module Warning (from ./node_modules/postcss-loader/lib/index.js):  
	(Emitted value instead of an instance of Error) autoprefixer: /xxx/xxx.vue:187:6: Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
复制代码

解决方法:

// 将样式中像下面的写法
/* autoprefixer: off */
....
/* autoprefixer: on */
// 改为
	
/* autoprefixer: ignore next */	
复制代码

如果使用了 script-ext-html-webpack-plugin ,要注意与 html-webpack-plugin 的版本兼容

如果出现的异常如下:

(node:24424) UnhandledPromiseRejectionWarning: Error: Cyclic dependency 
	 
(node:24424) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:24424) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
复制代码

这是循环依赖导致的。默认情况下 html-webpack-plugin 的配置项 chunksSortMode 的值是 auto ,需要改为 none

new HtmlWebpackPlugin({
     filename: '',
     template: 'index.html',
     inject: true,
     favicon: resolve('favicon.ico'),
     title: '',
     path: '',
     minify: {
     	  ...
     },
     chunksSortMode: 'none'
  }
)
复制代码

但是修改后会出现问题: chunksSortMode 决定你 chunks 的加载顺序,如果设置为none,你的 chunk 在页面中加载的顺序就不能够保证了,可能会出现样式被覆盖的情况。比如在app.css里面修改了一个第三方库element-ui的样式,通过加载顺序的先后来覆盖它,但由于设置为了none,打包出来的结果会变成下面这样:

<link href="/newapp/static/css/app.48599466.css" rel="stylesheet">
<link href="/newapp/static/css/chunk-elementUI.6a2cdc9f.css" rel="stylesheet">
<link href="/newapp/static/css/chunk-libs.dc4401e2.css" rel="stylesheet">
复制代码

app.css 被先加载了,之前写的样式覆盖就失效了 。

解决方法: chunksSortMode 属性去掉,升级 html-webpack-plugin:"4.0.0-alpha"script-ext-html-webpack-plugin:"2.0.1"

修改后如果出现以下异常:

/xxx/node_modules/script-ext-html-webpack-plugin/lib/plugin.js:50
      compilation.hooks.htmlWebpackPluginAlterAssetTags.tap(PLUGIN, alterAssetTags);
                                                        ^
TypeError: Cannot read property 'tap' of undefined
复制代码
  • 修改"html-webpack-plugin": "^4.0.0-alpha" => "4.0.0-alpha"
  • 删除 node_modules
  • 删除 package-lock.json
  • npm install/yarn

参考文章:【1】、 【2】


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Test Driven Development

Test Driven Development

Kent Beck / Addison-Wesley Professional / 2002-11-18 / USD 49.99

Quite simply, test-driven development is meant to eliminate fear in application development. While some fear is healthy (often viewed as a conscience that tells programmers to "be careful!"), the auth......一起来看看 《Test Driven Development》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换