webpack注意事项记录

以下问题均为webpack@1.x下总结

1. 版本兼容问题

webpack1.x版本一般都与1.x版本的插件匹配,例如webpack-dev-server2.x使用在webpack1.x版本中会出现不兼容问题

2. 启动webpack-dev-server

在命令行中直接使用webpack-dev-server没有作用,需要通过将脚本写入package.json的script中通过npm run xxx的方式来启动(不要忘记配置devServer)

3. webpack调试问题

如果需要调试只需要在配置文件中配置devtool即可,然后启动server会在浏览器调试工具source中发现错误代码在模块中的具体位置,而不是bundle.js中的位置

4. 配置文件中resolve配置项问题

extensions数组必须要包含空字符,例如['','js','jsx']
如果没有数组中第一项那么webpack查找react.js将会变成react.js.js
查找模块顺序会按照extensions数组从左到右的优先级进行

5. 出现Unterminated JSX contents时请认真查看标签是否闭合

Paste_Image.png

6. element.loader.split is not a function错误原因可能是配置文件中loader书写错误

Paste_Image.png

7. import模块无法找到可能是resolve中root错误

Paste_Image.png

8. 使用antd组件,编写css的loaders时必须style在前,css在后

css-loader顺序问题导致错误.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,242评论 7 35
  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,896评论 31 98
  • 1:物质是什么? 《当代哲学主流》一书中写的一段名言开始。 他写道:“未来世代的人们,有一天会问: 二十世纪的失误...
    飘涯阅读 357评论 0 17
  • 突然想写这样一篇文章源于网络的一篇关于邓文迪的文章。48岁的邓文迪和21岁的小鲜肉男友在海边散步的照片在网络疯传,...
    大静有声阅读 506评论 1 0