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"
    }