webpack css-loader less-loader报错：

webpack css-loader 报错：

总的来说----都是版本的问题
///css-loader
明明下载了css-loader ，但是终端输入 webpack ./src/main.js ./dist/bundle.js 或 cnpm run build 时，出现 模块生成失败 的信息

这里是 webpack ./src/main.js ./dist/bundle.js 错误信息
ERROR in ./src/css/normal.css
//模块生成失败
Module build failed: Error: Cannot find module ‘uri-js’
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
…

解决：
查找原因：模块生成失败可能是css-loader安装失败，

//package.json文件
"devDependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^1.2.1",
    "webpack": "^3.6.0"
  }

在终端中输入，cnpm install

peerDependencies WARNING css-loader@^2.1.1 requires a peer of webpack@^4.0.0 but webpack@3.6.0 was installed
peerDependencies WARNING style-loader@^1.2.1 requires a peer of webpack@^4.0.0 || ^5.0.0 but webpack@3.6.0 was installed

百度翻译：peerDependencies警告css loader@^{2.1.1需要webpack@}4.0.0的对等方，但是网页包@3.6.0已安装
也就是说webpack的版本问题-----那就换个版本呗

终端输入：
cnpm install webpack --save-dev

//package.json文件
"devDependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^1.2.1",
    "webpack": "^3.12.0"
  }

cnpm run build 运行成功

补充：

less-loader 报错：

ERROR in ./node_modules/[email protected]@css-loader/dist/cjs.js!./node_modules/[email protected]@style-loader!./node_modules/[email protected]@css-loader/dist/cjs.js!./node_modules/[email protected]@less-loader/dist/cjs.js!./src/css/normal.css
Module build failed: CssSyntaxError

或者
character ‘@’ (1:0)
You may need an appropriate loader to handle this file type.
版本问题: 可能是版本太高
这里直接给文件代码吧

cnpm install less@3.9.0 --save-dev

cnpm install less-loader@4.1.0 --save-dev

//package.json文件
"devDependencies": {
    "css-loader": "^2.1.1",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^3.12.0"
  }

注意：确定相关配置代码没有问题，有可能粗心的错呢
webpack.config.js文件

module: {
    rules: [
      {
        test: /\.css$/,
        //使用多个loader时，webpack读取是从右向左的
        use: ['style-loader','css-loader'],
    },
    {
      test: /\.less$/,
      use:[{
        loader:'style-loader'
      },{
        loader:'css-loader'
      },{
        loader:'less-loader'
      }]
    }
  ]
  }

注释/////
1—由于loader插件和webpack 安装在本地文件上，所以若是用
webpack ./src/main.js ./dist/bundle.js 打包文件 ，可能会失败，
所以这里用 cnpm run build (使用本地脚本打包)
2—build 是 package.json文件中脚本

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^1.2.1",
    "webpack": "^3.12.0"
  }
}

3—若是以上解决不了，一直重复终端输入 webpack ./src/main.js ./dist/bundle.js 或 cnpm run build 时 看看报错信息改

报错系列---------
1-- 缺少style-loader模块：ERROR in ./src/main.js
Module not found: Error: Can’t resolve ‘style-loader’ in …

2–Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema…
或者 module.exports = class Template extends Tapable {
TypeError: Class extends value # is not a constructor or null
at Object.…
重新安装webpack：cnpm install webpack --save-dev (也可以考虑把node_modules文件删除，重新下载所有)

3–Error: Cannot find module ‘webpack-sources’ //重点这个单引号里的
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
at Module.require (module.js:597:17)
重点这个单引号里的，都是缺少这个模块，cnpm install webpack-sources下载

ヾ(◍°∇°◍)ﾉﾞ