React应用启动失败：Webpack配置因路径含感叹号报错求助

你碰到的这堆Webpack编译错误，根源其实很简单：你的项目根路径里包含了感叹号（!）——这个符号是Webpack loader语法里的保留字符，用来分隔不同的加载器（比如style-loader!css-loader这种写法），所以当Webpack在配置里读到带!的路径时，会直接判定不符合API规范，抛出校验错误。

下面是具体的解决步骤：

• 迁移项目到无特殊符号的路径
  把你的项目从D:\!_FrontEnd\untitled1\my-app移动到一个不含!、@这类Webpack敏感字符的路径下，比如D:\FrontEnd\untitled1\my-app或者D:\Projects\ReactApps\my-app。要注意整个路径层级里都不能有这类特殊符号，包括父文件夹。

• 清理缓存并重新初始化项目
  移动完成后，先手动删掉项目里的这些目录和文件：

  • node_modules
  • .cache（在node_modules下的那个缓存目录）
  • build（如果之前已经执行过打包的话）
    然后在项目根目录重新执行命令：

  npm install
  npm start
  

  这时候Webpack会基于新的合法路径重新生成配置，之前的报错就会消失了。

其实这不算你操作有误，只是路径命名刚好踩中了Webpack的语法陷阱——毕竟谁能想到感叹号会影响构建工具呢😅

内容的提问来源于stack exchange，提问作者Konstantin Goncharov