webpack项目安装与加载器常出现问题

项目名为webpack，直接报错，在package.json里面把名字修改

TypeError: this.getOptions is not a function版本过高，得安装低版本的

打包jquery报错，大概率是jQuery版本过低，不支持，或者有的包官网已经没有了，去官网看看最新的包并下载 npm i jquery@版本号 -S

webpack自动打包问题，打包后的路径没有在根目录的首页找到，访问报404，访问本机127.0.0.1/8080报Cannot GET /，暂时未找到解决方法，先不自动打包，手动吧，后续看看怎么解决

webpack自动打包报Cannot GET /问题，修改样式无法改变，目前解决的方法是版本号，把webpack安装成@4.29.0，webpack-cli版本号安装成3.2.1，jQuery安装成3.6.0，webpack-dev-server安装成3.1.14版本即可完美解决

安装完最新版本的html-webpack-plugin webpack 错误： TypeError: Cannot read property ' tap ' of undefined 1.错误原因

解决方法：安装html-webpack-plugin版本号为3.2.0

webpack中的加载器

打包处理css文件时报TypeError: this.getOptions is not a function错时

安装style-loader版本为0.23.1，css-loader版本为2.1.0

打包处理less文件时报TypeError: this.getOptions is not a function错时

安装less版本为3.9.0，less-loader版本为4.1.0

打包处理scss文件时报TypeError: this.getOptions is not a function错时

安装node-sass版本为10.2.0，安装sass-loader版本为4.14.1

安装 node-sass 出错了，Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_binding.node

出不了墙，用这个下载就行了npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 这一行命令可以解决这个错误

安装post-css自动添加css的兼容性前出错了报TypeError: this.getOptions is not a function错时

安装postcss-loader版本为4.3.0，autoprefixer版本为9.8.6

打包样式表中的图片以及字体文件

安装url-loader和file-loader后图片要是显示不出来

把url-loader版本号改为2.3.0即可，file-loader最新版本即可（要是报错可安装旧版本6.2.0）

打包js文件中的高级语法

安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D
安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D没有报错（要是运行不起来，可往下去图片根据版本号依次安装对应的版本）

配置vue的加载器

安装vue组件的加载器 npm install vue-loader vue-template-compiler -D（安装最新版本即可，没有报错，有报错改为下面代码块的版本)

.vue文件的加载器

安装vue组件的加载器 npm install vue-loader vue-template-compiler -D(一般不会报错，出错还是按照文底的代码块版本重新安装)

这是安装的所有包的版本号

   "dependencies": {"jquery": "^3.6.0","node-sass": "^4.14.1","sass-loader": "^10.2.0","vue": "^2.6.14"},"devDependencies": {"@babel/core": "^7.16.0","@babel/plugin-proposal-class-properties": "^7.16.0","@babel/plugin-transform-runtime": "^7.16.4","@babel/preset-env": "^7.16.4","@babel/runtime": "^7.16.3","autoprefixer": "^9.8.6","babel-loader": "^8.2.3","css-loader": "^2.1.0","file-loader": "^6.2.0","html-webpack-plugin": "^3.2.0","less": "^3.9.0","less-loader": "^4.1.0","postcss-loader": "^4.3.0","style-loader": "^0.23.1","url-loader": "^2.3.0","vue-loader": "^15.9.8","vue-template-compiler": "^2.6.14","webpack": "^4.29.0","webpack-cli": "^3.2.1","webpack-dev-server": "^3.1.14"}

webpack项目安装与加载器常出现问题相关推荐

webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
需要了解的常用Webpack插件配置-loader加载器
我们都知道通过安装和配置第三方插件,可以使我们的webpack拓展更多的功能,虽然之后开发项目不需要我们自己去进行这些繁琐的配置,但是我们需要知道这些,在必要时我们可以去做出修改比如我们在初识web ...
vue 项目安装 openlayer 加载高德地图
vue 项目安装 openlayer 今天呢,稍微说一下关于 vue 项目使用 openlayer 的一些操作,我也是刚开始学习,在摸索. 比较讨厌的一点就是他的官网说明文档啥的都是英文的,对英语不好 ...
js css加载器,webpack的CSS加载器的使用
什么是loader loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webp ...
MC基础教程#2 加载器、模组、光影、材质包、数据包下载及安装(国际Java版)
MC基础教程系列第二期出了和上一期隔了两年- 加载器下载 Forge 老牌加载器,新版本( 1.13+ )不太好用官网: https://files.minecraftforge.net/net ...
计算机快应用,快应用加载器PC助手
快应用加载器PC助手是一款功能强大.专业好用的应用程序加载软件,该软件支持加载快应用到多终端,并可测试卡片和hap链接,在电脑上安装快应用加载器PC助手后,可以运行打包生成的rpk包,用户只需连接已连 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
webpack中loader加载器(打包非js模块)
通过loader打包非js模块我这儿用VScode为编辑器在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结尾的模块,webpack 默认处理不了, ...
webpack使用加载器来加载CSS样式
前言: 对于webpack来说,每个文件都是一个模块,比如css.js.html.jpg等. 对于不同的模块,就得需要不同的加载器(Loaders)来处理,所以加载器是webpack最重要的功能. 安 ...

webpack项目安装与加载器常出现问题

webpack项目安装与加载器常出现问题相关推荐

最新文章

热门文章