以下问题均为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时请认真查看标签是否闭合

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

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

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

网友评论