webpack3.x到4.x

最新推荐文章于 2021-06-17 15:30:13 发布
最新推荐文章于 2021-06-17 15:30:13 发布
阅读量697 收藏 2
点赞数
分类专栏： vue 文章标签： webpack4.x 迁移 升级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmy0111ly/article/details/84957846
版权
本文档详细记录了从webpack3.x升级到4.x的过程中遇到的错误及解决方案，包括html-webpack-plugin版本过低导致的问题，vue-loader的升级与适配，以及loaderContext.emitError错误的处理。
摘要由CSDN通过智能技术生成

终于，需要把webpack3.x升级到4.x了，导火索就是需要压缩，该来的总会来啊

  1. webpack3.x => 4.x
   cnpm install --save-dev webpack@4.x 	（[https://github.com/webpack/webpack/releases](https://github.com/webpack
最低0.47元/天 解锁文章
行走的鱼儿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack:^4.x.x学习，错误集锦
weixin_43286092的博客
06-15 274
文章目录1.TypeError: Cannot read property 'bindings' of null 1.TypeError: Cannot read property ‘bindings’ of null 原因： babel版本问题 官方说明： 在webpack 4.2以上使用： npm install -D babel-loader @babel/core @babel/preset-env 重新安装后，再更改老的配置 原来是“env”而已，由网友提供的答案顺利解决了问题。 ...
用webpack3.x教程学习webpack4.X中遇到的一些问题，及总结
an501920078的博客
06-11 439
全局安装webpack 和webpack-cli 在package.json中的"scripts":加入 “dev”: “webpack --mode development”, “build”: “webpack --mode production” 创建webpack.config.js文件 const path = require(‘path’); var webpack=require(‘...
webpack3升级webpack4
litCabbage的博客
06-17 1372
为了优化包体积大小，想要将老项目的webpack3升级到webpack4，再升级到webpack5 一、升级版本 1、webpack ^3.1.0 => ^4.29.6 2、webpack-cli ^3.1.2 => ^3.3.0 3、webpack-dev-server ^2.11.3 => ^3.2.1 4、html-webpack-plugin ^2.30.1 => ^3.2.0 5、vue-loader ^13.3.0 => ^15.7.0 （不升级，会报找.
webpack安装使用 4.x
LGDmar的博客
06-05 354
众所周知webpack是一款打包项目的打包工具 本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。 安装webpack之前请确保你已安装了node.js 如果没有安装请点击下载安装:官网下载安装地址 webpack四个核心概念： 入口entry 出口..
webpack 3 升级 webpack4 个人笔记
weixin_34162401的博客
10-22 154
参考文章： 　　1. webpack4升级完全指南 　　　　https://segmentfault.com/a/1190000014247030 　　2. Mobx useStrict is not a function 　　　　https://blog.csdn.net/greekmrzzj/article/details/79861787 　　3.babel-preset-en...
webpack3.x升级到webpack4.x
michael8512的博客
11-15 1273
虽然说webpack5都已经出了，但是，可能有一部分人还在用webpack3，因此这篇文章主要是基于vue-cli中到项目配置，从webpack3升级到4.x。 由于webpack3升级到4以后，很多配置项发生了变化，因此在升级过程中会遇到很多坑。 1. webpack.base.conf.js 首先。从webpack.base.conf.js开始，输入输出和上下文配置基本一样的，这边在plugin的位置引入了VueLoaderPlugin，同时把HtmlWebpackPlugin也提取到这里 p
Vue项目从webpack3.x升级webpack4不完全指南
10-17
在文档中提到，泡面将webpack从3.x版本升级到了4.28.3版本。需要特别注意的是，随着webpack的升级，其他依赖于webpack的插件和加载器也需要进行相应的版本升级。如webpack-dev-server更新到3.1.14版本，webpack-cli...
webpack 3.X学习之多页面打包的方法
10-18
本文将介绍在webpack 3.X版本中如何进行多页面应用的打包，并详细说明其配置方法。 首先，webpack的基本打包流程是通过一个配置对象来完成的，这个对象中会定义入口（entry）、出口（output）、以及使用的插件...
hand-vue3-project:Vue 3.x + Webpack 5.x 手动搭建开发环境
05-26
在本文中，我们将深入探讨如何使用Vue 3.x和Webpack 5.x手动搭建一个完整的前端开发环境。Vue 3.x是Vue.js框架的最新版本，它带来了许多性能优化和新特性，而Webpack 5.x作为现代JavaScript应用的模块打包器，能够...
webpack3X基本配置
08-10
webpack 3.X基本配置
webpack3XVue2全家桶搭建的单页面应用PC用的elementui2移动用的vux
08-10
webpack3.X Vue2全家桶搭建的单页面应用 PC用的element-ui2 移动用的vux
webpack3.0基础配置项目
07-11
webpack3.0基础配置，希望对大家有帮助，仅供才考，共同学习。
webpack4.x配置demo
01-22
一个简单的webpack4.x配置demo webpack4.x配置入门教程：https://blog.csdn.net/weixin_39291021/article/details/86569529
【webpack】 4.x 版本 安装打包
freedomVenly的博客
06-28 641
中文文档： https://www.webpackjs.com/ 首先，需要下载node.js 的相关环境,这个就不多说了，网上一大堆，下载之后开始执行： 1、新建一个文件夹，在终端里输入： //全局安装： npm install webpack -g npm install webpack-cli -g 设置好以后可以选择在建一个子文件夹 “demo1” 终端里输入： " cd dem...
webpack4.x安装和配置
weixin_30435261的博客
04-11 258
一、全局安装webpack npm install webpack -g 二、创建项目 我们在合适位置新建一个文件夹wpk-test，用于存放我们的项目。命令行中定位到webpack-test文件夹下，输入以下命令进行项目的初始化： npm init 这里，要求设置很多选项，可以按项目情况配置也可以不填直接回车。完成后，我们发现文件夹中增加了package.json文件，它用于保存关...
webpack4.x入门
qq_37322278的博客
05-01 1076
Webpack4webapck概念本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 一、webapck的安装:1. npm instasll web...
webpack3.X升级webpack4.X
zyx的博客
02-21 1671
1.先升级所有相关插件。以下列出的，除了vue和vue-template-compiler 应该不用。其他最好都升到最新版本 插件 升级前 升级后 vue 2.5.2 2.5.22 webpack 3.6.0 4.29.0 babel-loader 7.1.1 7.1.5 css-loader 0.28.7 1.0.0 ...
webpack——3.x版本总结
diaobei2084的博客
02-07 261
一、webpack的作用 　　1.打包： 把多个javascript文件打包成一个文件，减少http请求，减轻服务器的压力 　　2.转换： 把浏览器不能识别的语言转换成javascript,让浏览器能够识别 　　3.优化： 优化和提升性能 二、webpack的安装 　　1.npm install -g webpack //全局安装，一般不推荐 　　2.对项目目录进行安装 ...
webpack2.x升级到webpack5.x
最新发布
05-18
升级webpack2.x到webpack5.x需要注意以下几点： 1. 升级Node.js版本：webpack5.x需要Node.js版本至少为v10.13.0。 2. 更新webpack及其相关插件：需要将webpack、webpack-cli、webpack-dev-server、html-webpack-plugin等相关插件更新到最新版本。 3. 更新loader：webpack5.x已经默认支持ES6模块，因此需要将babel-loader的版本升级到8.x以上版本。 4. 处理模块依赖：webpack5.x默认使用“module type”为ES modules，如果你使用的是CommonJS模块，请更新配置文件中的“output.library.type”为“commonjs2”。 5. 替换内置插件：webpack5.x已经将一些内置插件替换成了新的插件，需要将配置文件中的相关插件进行替换。 6. 更新配置项：webpack5.x增加了一些新的配置项，需要更新相关配置文件。 7. 处理CSS：webpack5.x默认使用“asset modules”处理CSS文件，需要将style-loader和css-loader的配置进行修改。 总之，升级webpack2.x到webpack5.x需要做很多工作，需要仔细检查和修改配置文件，确保升级后能够正常运行。建议先在开发环境进行测试，确保升级后不会出现问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值