之前一直使用指定位置的脚本路径太长了,不方便,最好还是安装下npx 命令
npm install -g npx
之前跳过了 css样式引入这一块的内容,在学习模块热部署这一内容时,引入了css的内容,结果执行 npm run dev
命令时总是报错
ERROR in ./src/styles.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
/Users/kenny/dev/workspace/webpack-demo/node_modules/css-loader/dist/plugins/postcss-icss-parser.js:32
accumulator[normalizedUrl] = { ...accumulator[normalizedUrl],
^^^
SyntaxError: Unexpected token ...
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
找了三个小时也没有找到到底是哪里写错了,网上也没有搜索到相应的错误处理方式,我只能认为是这个框架本身有问题,但是这个框架也不是今天才用的,以前也有人用,唯一的区别是以前用的是比较旧的版本,到官网上看看能不能找到一个合适的版本,然后我惊呆了…
4天前发布的版本,昨天我使用的时候才发布了两天。而且这更新速度真是令人咋舌。
卸载了当前版本,安装一个稳定的
npm uninstall css-loader --save-dev
npm install --save-dev css-loader@2.1.1
虽然这个错误很坑爹,但是也真的让我意识到,前端工程发展如此迅速,真的是离不开这么多社区工作者的笔耕不辍。这里还有一个不容易觉察到的细节的差异:在引入 clean-webpack-plugin
这个插件的时候发现这个引入的语法已经变更了,由原来的 const HtmlWebpackPlugin = require('html-webpack-plugin');
--> const {CleanWebpackPlugin} = require('clean-webpack-plugin');
这个在中文网上是没有更新的,但是在 查看原文
时 我们可以看到 这个地方已经被更正为正确的语法。