webpack打包需要多多注意细节,例如打包时出现you may need an appropriate loader to handle this file type ....就表示我们需要下载一个loader来处理这个事件.
由提示可以知道在index.less处打包时出现错误,所以下载一个 less-loader ,可以看到用了11秒完成.
所以重新跑一遍打包程序.
但是可以看到出现了与之前一样的错误 , 确定loader有没有下错,没有就是某处代码出现了问题 , 需要认真排查.
这时去浏览器查看 效果
打包没有成功但效果正常,查看style属性发现也没有问题 , 但是仔细思考却发现 ,下载用了less-loader没有处理成功的样式 , 浏览器却有显示,那么一定是这里处了问题.
发现是这里的index.less由vscode中插件自动转化为了index.css,所以才导致在浏览器中运行时不嫩及时发现错误,直到打包才出现问题 , 这时可以将index.css包删除 , 也可以不管 ,因为less问题依旧没有解决 , 如果解决好了也不需要做过多处理.(建议还是删掉css文件,容易在排错时混淆视觉效果)
其实直到这里也快找到问题所在了.
思考 :less没有被打包的同时浏览器读取了index.css中的样式
.
解决 : 删掉index.css后样式消失,那么说明只引用了css文件没有less的引用,才导致无法打包less文件而css文件中的而样式,查看引用路径.
果然发现有两个路径引用是相同的,所以将css正则判断改为less,文件就可以正常被读取了.
终于显示打包成功.
细节这的是非常重要,为了图快一点点,直接将上面的复制了下来,就导致了这个出错,中间查找bug的时间都可以写几遍了,有点得不偿失.
