webpack:^4.x.x学习，错误集锦

最新推荐文章于 2022-08-31 19:25:53 发布
最新推荐文章于 2022-08-31 19:25:53 发布
阅读量194 收藏
点赞数
分类专栏： webpack打包 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43286092/article/details/106765334
版权
本文汇总了在使用webpack ^4.x.x时遇到的常见错误，包括TypeError: Cannot read property 'bindings' of null、Cannot find module './index.vue?vue&type=style&index=0&lang=scss&'、警告：必须配置开发或生产模式，以及webpack.optimize.CommonsChunkPlugin已移除的错误。并提供了相应的解决办法，如更新babel版本、配置webpack.config.js规则、在package.json和webpack.config.js中设置模式，以及调整splitChunks的使用。
摘要由CSDN通过智能技术生成

文章目录

文章转自：传送门

1.TypeError: Cannot read property ‘bindings’ of null

原因： babel版本问题
可能没装babel cli，看了网友写的才发现，加上之后就好了
在这里插入图片描述
官方说明：
在这里插入图片描述
在webpack 4.2以上使用：

npm install -D babel-loader @babel/core @babel/preset-env

重新安装后，再更改老的配置
在这里插入图片描述
原来是“env”而已，由网友提供的答案顺利解决了问题。
在这里插入图片描述

2. Cannot find module ‘./index.vue?vue&type=style&index=0&lang=scss&’

在这里插入图片描述
解决办法如下

"node-sass": "^4.12.0",
 "sass-loader": "^7.1.0",

webpack.config.js rules里面 配置

   {
   
                test
最低0.47元/天 解锁文章
zhangFreedom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack3.x到4.x
陌上花开
01-21 684
终于，需要把webpack3.x升级到4.x了，导火索就是需要压缩，该来的总会来啊 webpack3.x => 4.x cnpm install --save-dev webpack@4.x （[https://github.com/webpack/webpack/releases](https://github.com/webpack/webpack/releases)） cnpm...
webpack ^4.0.1 版本的webpack.config.js配置
sunling的专栏
03-02 4345
var path = require("path"); module.exports = { entry:'./app/index.js', output:{ filename:'index.js', path:path.resolve(__dirname,'dist'), publicPath:'temp/' ...
webpack4.x最详细入门讲解
10-28 441
前言 本文主要从webpack4.x入手，会对平时常用的Webpack配置一一讲解，各个功能点都有对应的详细例子，所以本文也比较长，但如果你能动手跟着本文中的例子完整写一次，相信你会觉得Webpack也不过如此。 一、什么是webpack，为什么使用它？ 1.1 什么是webpack？ 简单来说，它其实就是一个模块打包器。 1.2 为什么使用它？ 如果像以前开发时一个htm...
webpack
m0_46235547的博客
08-31 343
Webpack 类似于前端的MAVEN。
1.webpack^4.42.1文档学习
l_b_c的博客
04-17 197
webpack是啥? 说到webpack，一般没有特地地去系统学习的朋友(比如我[手动滑稽])，可能只会联想到loader，proxy，plugin等这些工作中的常用配置选项。其实在前端工程化、模块发之中，它举足轻重。如果能熟练使用它，绝对是能够对于项目开发，以及对于你构建代码的境界提升都有好处。 1.首先我们本地新建一个文件webpack-demo，并通过npm初始化项目，命令如下: npm i...
webpack4.xDemo
04-02
通过"webpack4.xDemo"的学习，你将能够熟练地运用Webpack 4.x进行项目构建，理解其核心概念，并具备解决常见问题的能力。这个教程全面覆盖了Webpack的基础知识，是你踏入Webpack世界的良好起点。
Vue项目从webpack3.x升级webpack4不完全指南
11-29
Vue项目的Webpack从3.x版本升级到4.x版本是一项重要的技术更新，这有助于利用Webpack新版本带来的性能提升和优化。在本文中，我们将详细介绍这个过程，包括必要的依赖升级、配置文件的调整以及解决可能出现的问题。 ...
babel7.x和webpack4.x配置vue项目的方法步骤.docx
01-13
在本文中，我们将探讨如何使用Babel 7.x和Webpack 4.x配置Vue项目，以及在升级和配置过程中可能遇到的问题及解决方案。 首先，让我们看看如何安装和配置这两个工具。在新的Vue项目中，你需要安装以下依赖： 1. `@...
webpack4.x基础入门
04-02
对最新的webpack4.x进行解析，对常见的错误和运行方式进行案例展示。通过对webpack4.x的最新剖析，可以快速准确学习最新的webpack开发技术，对前端开发工作效率提升n倍。
详解webpack+es6+angular1.x项目构建
08-30
在现代Web开发中，构建工具和前端框架的组合起着至关重要的作用，本文将深入探讨如何结合`webpack`、`ES6`以及`Angular 1.x`来构建项目。`webpack`是一个强大的模块打包工具，它能够处理JavaScript、CSS、图片等各种...
Webpack学习
25氪
02-27 583
一、webpack是什么 核心概念 webpack是一种前端资源构建工具，一个静态模块打包器。 在webpack看来，前端所有资源文件（js/json/css/img/less）等都会作为模块处理 他根据模块依赖关系进行静态分析，打包生成对应静态资源 webpack 五个核心概念 Entry 入口指示，webpack以哪个文件为入口起点进行开始打包，分析构建依赖关系图 Output 输出指示，webpack打包后资源输出到哪里去，以及怎么命名 Loader 在module文件下，让webpack
如何完美配置Webpack4.x.x以及打包运行测试
左撇峰子的博客
05-02 664
背景 第一次使用Webpack4还不大熟悉，导致测试项目时老是失败。所以找了资料，以下内容参考自EddyWorkHard，对其内容进行整理加总结，大家可以参考参考。 注：以下部分npm命令都改用为cnpm，未配置请点击我查看。 1.安装webpack 打开cmd，执行以下命令： cnpm install webpack -g 2.安装webpack-cli（必装） 安装完后继续...
webpack:^4.x.x打包单页面或多页面应用
weixin_43286092的博客
06-17 443
文章目录注意事项1.切记一个项目中cnpm切不可与npm交叉使用，安装依赖选用cnpm即可。**2.安装的依赖或者插件，对于版本有要求的，尽量一条命令进行安装**单页面/多页面应用构建，webpack打包基本流程- **单页面webpack.config.js示例**- **多页面webpack.config.js示例，并引入jQuery** 注意事项 1.切记一个项目中cnpm切不可与npm交叉使用，安装依赖选用cnpm即可。 (-D代表–save-dev，安装在devDependencies中。-S代表
webpack入门(一)
疯林
04-14 238
webpack 入门(一)    本来年前就想写关于webpack这部分的,但是放假回家之后就彻底”疯”了,在家一呆就是二十天(话说年假长真是好,不知道羡慕死多少小伙伴),年后来了直接就被拉去封闭了,二脸懵逼啊,说来就来…封闭是上周结束的,周末也没有休息,终于有时间整理下思路,写一下笔记……webpack介绍    现如今,模块化结构早已成为网站开发的主流,开发网站的主要工作,也不再是自己编写各种功
webpack升级到4版本遇到的坑
老夫风清扬的博客
03-13 5109
问题一：CommonsChunkPlugin插件的报错，因为webpack4已经把该插件移除了，用optimization.splitChunks替代 报错信息如下： Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. ...
webpack - babel配置
weixin_34146986的博客
04-03 299
webpack - babel配置 babel是一个javascript编译器，是前端开发中的一个利器。它突破了浏览器实现es标准的限制，使我们在开发中可以使用最新的javascript语法。 通过构建和babel，可以使用最新js语法进行开发，最后自动编译成用于浏览器或node环境的代码。 webpack中使用babel 配合webpa...
webpack详解
热门推荐
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
出现 npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is ins**
weixin_43750031的博客
11-20 3万+
出现 npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is ins** mac 安装webpack 报错 建议安装较低版本的webpack eg: * npm install webpack@3.0.0 -g
{ "name": "ts_base", "version": "1.0.0", "description": "", "main": "./src/index.ts", "scripts": { "start": "webpack-dev-server --mode development --config ./build/webpack.config.js", "build": "webpack --mode production --config ./build/webpack.config.js", "lint": "eslint src --ext .js,.ts", "test": "jest" }, "keywords": [ "TypeScript" ], "author": "liangxiao", "license": "ISC", "devDependencies": { "@types/jest": "^24.0.15", "@types/jquery": "^3.3.29", "@types/source-map": "^0.5.2", "@typescript-eslint/eslint-plugin": "^1.10.2", "@typescript-eslint/parser": "^1.10.2", "awesome-typescript-loader": "^5.2.1", "clean-webpack-plugin": "^3.0.0", "eslint": "^5.16.0", "fork-ts-checker-webpack-plugin": "^1.3.7", "html-webpack-plugin": "^3.2.0", "jest": "^24.8.0", "ts-jest": "^24.0.2", "ts-loader": "^6.0.2", "typescript": "^3.5.1", "webpack": "^3.6.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^2.6.9", "webpack-merge": "^4.2.1" }, "dependencies": { "jquery": "^3.4.1", "moment": "^2.24.0" } } 配置是否正确
最新发布
07-20
4. 如果你的Webpack配置文件使用了与Webpack 3.x 版本不兼容的特性、插件或加载器，请根据新版本的Webpack文档进行相应的调整。 修改后的`devDependencies`部分应如下所示： ```json "devDependencies": { "@...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值