初学webpack，所遇问题

约定不等于承诺〃 2024-03-24 20:22 13阅读 0赞

我学习看的视频是比较旧的视频，导致跟着学的时候，就会出现一系列问题；

因为你刚开始安装的可能并不是新的版本，这样会导致版本不兼容的问题

1. ERROR in ./src/css/normal.css  
Module build failed: TypeError: this.getOptions is not a function  
at Object.loader (E:\\qianduan\\VUE\\vuejs\\day01\\learnday02\\01-webpack的使用\\02-webpack起步\\node\_modules\\css-loader\\dist\\index.js:20:27)  
@ ./src/main.js 18:0-27

2.ERROR in ./src/css/normal.css  
Module build failed: TypeError: this.getOptions is not a function  
at Object.pitch (E:\\qianduan\\VUE\\vuejs\\day01\\learnday02\\01-webpack的使用\\02-webpack起步\\node\_modules\\style-loader\\dist\\index.js:22:24)  
@ ./src/main.js 18:0-27

3.ERROR in ./src/css/normal.css  
Module build failed: TypeError: this.getOptions is not a function  
at Object.pitch (E:\\qianduan\\VUE\\vuejs\\day01\\learnday02\\01-webpack的使用\\02-webpack起步\\node\_modules\\style-loader\\dist\\index.js:22:24)  
@ ./src/main.js 18:0-27

4.ERROR in ./node\_modules/css-loader/dist/cjs.js!./node\_modules/less-loader/dist/cjs.js!./src/css/normal.css  
Module build failed: TypeError: this.getOptions is not a function  
at Object.lessLoader (E:\\qianduan\\VUE\\vuejs\\day01\\learnday02\\01-webpack的使用\\02-webpack起步\\node\_modules\\less-loader\\dist\\index.js:12:24)  
@ ./src/css/normal.css 2:14-124  
@ ./src/main.js

#### 解决办法 ： ####

*  查找项目中的`package.json`文件，查看`less-loader/css-loader/style-loader`的版本。如果使用的是较新的版本，请尝试将其版本降级到与当前Webpack版本兼容的版本。可以手动在`package.json`文件中指定版本号，然后使用`npm install`命令重新安装。
 *  尝试清除npm缓存。使用`npm cache clean --force`命令清除你的npm缓存，然后重新运行`npm install`以重新安装项目依赖。
 *  检查Webpack配置文件中的加载器顺序是否正确。通常，首先需要使用`less-loader`将less转换为CSS，然后使用`css-loader`和`style-loader`将CSS添加到页面中。

##### 出现这种版本不兼容的问题，那么 #####

##### 运行一下这三步 #####

npm cache clean --force
    
    npm install
    
    npm run build

###### 注意：我的package.json的有这一行 "build": "webpack" ######

所以是npm run build

{
      "name": "meetwebpack1",
      "version": "1.0.0",
      "description": "",
      "main": "webpack.config.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "jm",
      "license": "ISC",
      "devDependencies": {
        "css-loader": "^2.0.2",
        "less": "^3.9.0",
        "less-loader": "^4.1.0",
        "style-loader": "^0.23.1",
        "webpack": "^3.6.0"
      }
    }