webpack学习-使用loader

深入浅出webpck-使用loader

最近在看webpack, 然后在入门章节的使用loader中遇到一个问题,引入css文件的时候, 在入口文件main.js中通过commonJS规范导入css模板

但是在重新构建后失败报错了, 重新安装引入loader还是报错

ERROR in ./main.css (./node_modules/css-loader/dist/cjs.js?minimize!./main.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'minimize'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
    at validate (/Users/zhangmin/Desktop/miner/webpack/node_modules/schema-utils/dist/validate.js:104:11)
    at Object.loader (/Users/zhangmin/Desktop/miner/webpack/node_modules/css-loader/dist/index.js:36:29)
 @ ./main.css 2:12-94 9:17-24 13:15-29
 @ ./main.js 2:0-21

webpack 5.2.0 compiled with 1 error in 403 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! first@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the first@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zhangmin/.npm/_logs/2020-10-23T03_15_20_202Z-debug.log

npm 报错This is probably not a problem with npm. There is likely additional logging output above.

网上搜索可能是版本问题
重新npm install
如果不行 把之前的都清空
rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install

但是还是报错, 然后发现了是css引入的方式错误
解决方法:
1、注意以上css-loader和style-loader的顺序。
2、这样引入css文件：require(’!style-loader!css-loader!./main.css’);
然后执行npm run build 重新刷新 index.html css样式生效

还有另一个原因是我使用了css-loader?minimize
原来是 webpack 3.0 之后以及 css-loader 1.0 以上已经将 minimize 这个属性去掉了导致报错

删除minimize main.js中还是引用./main.css 也不会报错了