webpack 中遇到的问题

已于 2022-06-22 11:25:44 修改
阅读量2.6k 收藏 1
点赞数
分类专栏： webpack 文章标签： webpack 前端 javascript
于 2022-05-19 01:34:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_46030883/article/details/124852900
版权 
PS C:\Users\86182\Desktop\webpack> npx webpack ./src/main.js
[webpack-cli] Unknown command or entry './src/main.js'
[webpack-cli] Run 'webpack --help' to see available commands and options

原因：没有找到入口文件， npx webpack ./src/main.js中 ./src/main.js和package.json 中的main字段不一样。
解决方案：改成一样呗！

ERROR in ./src/css/index.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> div {
|     width: 100px;
|     height: 100px;
 @ ./src/main.js 2:0-33

webpack 5.72.1 compiled with 1 error in 108 ms

原因：没有处理css文件的loader，我这是因为没有正确的书写loader的text的配置，写成了 “test: /.css$/” 正确的写法是不用加引号 。

解决方案：test: /.css$/,

sass-loader的问题
问题一：

asset main.js 56.1 KiB [emitted] (name: main)
runtime modules 972 bytes 5 modules
cacheable modules 16 KiB
  modules by path ./src/ 7.88 KiB
    modules by path ./src/scss/ 2.52 KiB 4 modules
    modules by path ./src/css/*.css 1.64 KiB 2 modules
    modules by path ./src/less/*.less 1.72 KiB 2 modules
    modules by path ./src/styl/*.styl 1.71 KiB 2 modules
    + 2 modules
  modules by path ./node_modules/ 8.07 KiB
    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB
      ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 2.44 KiB [built] [code generated]
      + 5 modules
    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB
      ./node_modules/css-loader/dist/runtime/noSourceMaps.js 64 bytes [built] [code generated]
      ./node_modules/css-loader/dist/runtime/api.js 2.26 KiB [built] [code generated]

ERROR in ./src/scss/index.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.sass)
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
Require stack:
- C:\Users\86182\Desktop\webpack\node_modules\sass-loader\dist\utils.js
- C:\Users\86182\Desktop\webpack\node_modules\sass-loader\dist\index.js
- C:\Users\86182\Desktop\webpack\node_modules\sass-loader\dist\cjs.js
- C:\Users\86182\Desktop\webpack\node_modules\loader-runner\lib\loadLoader.js
- C:\Users\86182\Desktop\webpack\node_modules\loader-runner\lib\LoaderRunner.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\NormalModuleFactory.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\Compiler.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\webpack.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\index.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack-cli\lib\webpack-cli.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack-cli\lib\bootstrap.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack-cli\bin\cli.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\bin\webpack.js
 @ ./src/scss/index.sass 8:6-146 22:17-24 26:0-116 26:0-116 27:22-29 27:33-47 27:50-64
 @ ./src/main.js 4:0-36

ERROR in ./src/scss/index.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.sass)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: PostCSS received undefined instead of CSS string
    at new Input (C:\Users\86182\Desktop\webpack\node_modules\postcss\lib\input.js:24:13)
    at parse (C:\Users\86182\Desktop\webpack\node_modules\postcss\lib\parse.js:8:15)
    at new LazyResult (C:\Users\86182\Desktop\webpack\node_modules\postcss\lib\lazy-result.js:133:16)
    at Processor.process (C:\Users\86182\Desktop\webpack\node_modules\postcss\lib\processor.js:28:14)
    at Object.loader (C:\Users\86182\Desktop\webpack\node_modules\css-loader\dist\index.js:128:51)
 @ ./src/scss/index.sass 8:6-146 22:17-24 26:0-116 26:0-116 27:22-29 27:33-47 27:50-64
 @ ./src/main.js 4:0-36

ERROR in ./src/scss/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss)
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
Require stack:
- C:\Users\86182\Desktop\webpack\node_modules\sass-loader\dist\utils.js
- C:\Users\86182\Desktop\webpack\node_modules\sass-loader\dist\index.js
- C:\Users\86182\Desktop\webpack\node_modules\sass-loader\dist\cjs.js
- C:\Users\86182\Desktop\webpack\node_modules\loader-runner\lib\loadLoader.js
- C:\Users\86182\Desktop\webpack\node_modules\loader-runner\lib\LoaderRunner.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\NormalModuleFactory.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\Compiler.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\webpack.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\index.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack-cli\lib\webpack-cli.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack-cli\lib\bootstrap.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack-cli\bin\cli.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\bin\webpack.js
 @ ./src/scss/index.scss 8:6-146 22:17-24 26:0-116 26:0-116 27:22-29 27:33-47 27:50-64
 @ ./src/main.js 5:0-36

ERROR in ./src/scss/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: PostCSS received undefined instead of CSS string
    at new Input (C:\Users\86182\Desktop\webpack\node_modules\postcss\lib\input.js:24:13)
    at parse (C:\Users\86182\Desktop\webpack\node_modules\postcss\lib\parse.js:8:15)
    at new LazyResult (C:\Users\86182\Desktop\webpack\node_modules\postcss\lib\lazy-result.js:133:16)
    at Processor.process (C:\Users\86182\Desktop\webpack\node_modules\postcss\lib\processor.js:28:14)
    at Object.loader (C:\Users\86182\Desktop\webpack\node_modules\css-loader\dist\index.js:128:51)
 @ ./src/scss/index.scss 8:6-146 22:17-24 26:0-116 26:0-116 27:22-29 27:33-47 27:50-64
 @ ./src/main.js 5:0-36

2 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.72.1 compiled with 4 errors in 1162 ms

提取一下就是：sass-loader模块出现问题，然后导致后面的css-loader出现问题

ERROR in ./src/scss/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss)
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
Require stack:
- C:\Users\86182\Desktop\webpack\node_modules\sass-loader\dist\utils.js
- C:\Users\86182\Desktop\webpack\node_modules\sass-loader\dist\index.js
- C:\Users\86182\Desktop\webpack\node_modules\sass-loader\dist\cjs.js
- C:\Users\86182\Desktop\webpack\node_modules\loader-runner\lib\loadLoader.js
- C:\Users\86182\Desktop\webpack\node_modules\loader-runner\lib\LoaderRunner.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\NormalModuleFactory.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\Compiler.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\webpack.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\lib\index.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack-cli\lib\webpack-cli.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack-cli\lib\bootstrap.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack-cli\bin\cli.js
- C:\Users\86182\Desktop\webpack\node_modules\webpack\bin\webpack.js
 @ ./src/scss/index.scss 8:6-146 22:17-24 26:0-116 26:0-116 27:22-29 27:33-47 27:50-64
 @ ./src/main.js 5:0-36

原因：可能原因是下载的时候出现丢包的现象，导致文件下载不完全。（这个原因是我的猜测）
解决方法：

npm install --save-dev node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

问题二：

ERROR in ./src/scss/index.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "  width:": expected pseudoclass or pseudoelement, was "100px {}"
        on line 2 of src/scss/index.sass
>>   width:100px {}

   -------^

SassError: SassError: Invalid CSS after "  width:": expected pseudoclass or pseudoelement, was "100px {}"
        on line 2 of src/scss/index.sass
>>   width:100px {}

   -------^

    at Object.loader (C:\Users\86182\Desktop\webpack\node_modules\sass-loader\dist\index.js:69:14)
 @ ./src/scss/index.sass 8:6-146 22:17-24 26:0-116 26:0-116 27:22-29 27:33-47 27:50-64
 @ ./src/main.js 4:0-36

原因：.sass的文件，写法错误。导致sass-loader解析出现问题。.sass的写法和普通css的写法不兼容，不能用普通css的写法去写sass.
解决方法：更正写法。
最后发现原因：不是下载scss-loader 是下载sass-loader

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值