在使用vue框架时，webpack打包出现了一个很常见却比较棘手的错误：
错误信息
这个错误是我在执行npm run build时抛出来的，对应的代码在生产环境的配置文件中：
miniCssExtractPlugin插件
当看到上面的报错时，通常都会认为是miniCssExtractPlugin插件的问题，在百度上关于这个插件的报错也能找到很多资料，比如这里的contenthash不要加content，解决方法也比较多。但我试遍了百度搜到的所有方法，又翻墙到国外去找，最后都没有解决。由于这问题浪费了一些时间，而且倍感奇葩，所以记录一下，希望下次别在有人踩坑。我遇到的这个打包失败的问题，和webpack的css抽离的插件毫无关系。尽管它抛出了这个错误，说配置有问题。
当你看到这篇文章的时候，建议你先把百度上那些的方式都试一下，因为这个情况的出现比较特殊，报错是说webpack插件的配置有问题，但实际上是因为webpack没写注释导致。比如说我在vue里面异步引入了一个组件，pop:()=>import( './components/pop' )，在这种情况下，代码在拆分打包的时候，会把这个异步引入的pop组件单独抽成一个js文件，所以需要给这个pop组件写一个注释，这个注释似乎被称为魔法注释，所以最后要这样写pop:()=>import(/** webpackChunkName:"pop" */ './components/pop')
我所遇到的问题，是因为没有给异步组件加魔法注释，导致运行npm run build时控制台抛出了上面那个错误，而那个错误告诉我和miniCssExtractPlugin有关，所以一直专注这个插件去了。也尝试遍了关于这个插件的方法，最后却发现是注释的问题。
这个异步引入组件里面的注释，并不是普通的代码那种注释，当webpack在拆分打包的时候，会把异步组件单独拆成一个js文件，而js文件需要命名，import()里面的/** webpackChunkName:"pop" */ ,这个pop就是在打包时的js文件的名字，如果没有写这个名字，那打包时就会出问题，而这个问题，就是上面那个报错。当加上这个之后，就ok了。如果不需要代码拆分，那直接同步引入组件，同步引入组件也不会出现这个问题。
这种错误解决起来不是什么大毛病，但是抛出的异常能改变纠错的方向，浪费一些不必要的时间。
网友评论