webpack注意事项记录

以下问题均为[email protected]下总结

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