极乐门资源网 Design By www.ioogu.com

1.webpack 3.11升级4.26

为了提升打包效率,在webpack3.11基础之上做了升级,webpack4.0发布以来,零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化,如果在项目开始使用4.0而不用vue-cli的默认配置,遇到的问题或许能少一些。

2. 安装/升级依赖

这些依赖有的是在build过程中发现依赖有新的替换或者报错,逐步替换的,如果想遇到多个坑,可以先把webpack、webpack-cli升级到对应版本

devDependencies:

"extract-text-webpack-plugin": "^4.0.0-beta.0"
"html-webpack-plugin": "^4.0.0-beta.14"
"mini-css-extract-plugin": "^0.9.0" (旧的optimize-css-assets-webpack不支持了)
"preload-webpack-plugin": "^3.0.0-beta.4"
"script-ext-html-webpack-plugin": "^2.1.3"
"vue-loader": "^15.3.0"
"webpack": "^4.26.1"
"webpack-cli": "^3.1.2"
"webpack-dev-server": "^3.2.1"
"script-ext-html-webpack-plugin": "^2.1.3"

3. 遇到的问题

升级webpack后,build报错:ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js

解决:升级vue-loader至15.3.0,

webpack.base.conf.js添加

const {VueLoaderPlugin} = require('vue-loader')
module.exports中添加
 plugins:[new VueLoaderPlugin()]

修改配置文件 webpack.prod.conf.js:

webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

解决:

webpack.prod.conf.js webpackConfig配置:
optimization: {
 noEmitOnErrors: true,
 concatenateModules: true,
 splitChunks: {
  chunks: 'all',
  name: 'common',
 },
 runtimeChunk: {
  name: 'runtime'
 }
 }
webpack.prod.conf.js webpackConfig配置: 
optimization:{
 namedModules: true
 },

Plugin could not be registered at ‘html-webpack-plugin-before-html-processing'. Hook was not found.

解决:

npm i preload-webpack-plugin@next -D

Tapable.plugin is deprecated. Use new API on .hooks instead

问题:extract-text-webpack-plugin兼容问题 ,功能:extract css into its own file

解决: 卸载extract-text-webpack-plugin,安装mini-css-extract-plugin

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

build出错:ERROR in TypeError: Cannot read property ‘hash' of undefined

解决:

  去掉这段
  //打包计时
  const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
  const smp = new SpeedMeasurePlugin();

WARNING in configuration
The ‘mode' option has not been set, webpack will fallback to ‘production' for this value. Set ‘mode' option to ‘development' or ‘production' to enable defaults for each environment.
You can also set it to ‘none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

解决:webpackConfig添加 mode: ‘production'

Tapable.plugin is deprecated. Use new API on .hooks instead

解决:

npm i --save-dev extract-text-webpack-plugin@next

会下载到 extract-text-webpack-plugin@4.0.0-beta

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization…

解决:

  • 去掉 webpack.optimize.CommonsChunkPlugin相关配置
  • webpackConfig中与plugins的同级添加
optimization: {
 splitChunks: {
   cacheGroups: {
    commons: {
     name: "commons",
     chunks: "initial",
     minChunks: 2
    }
   }
  }
 },

Unhandled rejection Error: “dependency” is not a valid chunk sort mode

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
 }),

解决:chunksSortMode改为auto或者注释

至此:npm run build 正常
接下来调npm run dev,直接运行成功

4. 总结

开启cache的情况下,原来打包时间22s左右,现在build最快8s左右

升级思路:

  1. 卸载webpack旧版本、安装新版本webpack, webpack-cli
  2. 遇到loader、plugin报错,升级loader、plugin,有的在4.0不支持,需要换成新的
  3. 卸载 ExtractTextPlugin、删除对应配置,改用 mini-css-extract-plugin
  4. 配置环境mode
  5. 其它wenpack3.0优化配置兼容处理
标签:
webpack3.0升级4.0,webpack3.0升级

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“webpack3.0升级4.0的方法步骤”

暂无webpack3.0升级4.0的方法步骤的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?