为了账号安全,请及时绑定邮箱和手机立即绑定

四大维度解锁Webpack 工程化的补充

2018.04.28 16:47 4864浏览

介绍

这边手记总结了一下参与我课程《四大维度解锁Webpack 工程化》的同学们的问题,为了防止未来还有其他同学碰到,我通过手记的方式把这些点,重新梳理一下(未来可能会继续补充)购买过课程的同学可以收藏:)

  • 设置 ESLint 检查代码格式时,配置动态import 的配置会报错 (5-6 节的开发环境 )

  • 不能正确访问到压缩以后或是 css-spirit 的图片(4-2 节 文件处理 - 图片处理 - 压缩图片处理 )

  • babel + tree-shaking (4-3 节 )

动态import 的配置

很多同学碰到在配置了eslint 配置了babel的时候还会出现这种错误 
图片描述
原因是缺少了babel-import 插件, 那么解决办法是什么呢?

npm install --save-dev babel-plugin-syntax-dynamic-import

.babelrc 中加上插件

{
    "plugins": ["syntax-dynamic-import"]}

这样就解决这个问题了!


file-loader 配置后不能正确访问图片地址的问题

很多同学在用file-loader 打包的时候发现相对路径是和老师的表现不一致,打包出来的图片老是不能正确定位,原因其实是因为 file-loader 的不断更新: 
https://github.com/webpack-contrib/file-loader/releases 
我们通过file-loader 的release note可以看出

https://img3.sycdn.imooc.com/5ae4334600015b8116700456.jpg

在2月20号的时候,context 会比issuer.context 优先级更高!什么意思,就是你设useRelativePath 不管用了,这个相对的context 一般来说都是 你的根目录

https://img1.sycdn.imooc.com/5ae434820001512919260860.jpg

这个修改很快就被打脸了,其实也不算快,花了10天时间又把这个修改给revert 了

https://img1.sycdn.imooc.com/5ae433c70001935c17460892.jpg

于是乎就有这样的bug 了,但是大家在开发的时候,包括vue-cli 打包出来的文件,都是建议本地起服务去查看

而不建议直接打开,因为直接打开file:和 http:的不同访问协议会导致很多资源查找的问题。

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

20人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消