《Webpack傻瓜式指南(一)》
文章地址: https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine
《Webpack傻瓜式指南(二)》
文章地址: https://zhuanlan.zhihu.com/p/20397902?columnSlug=FrontendMagazine
《Webpack傻瓜式指南(三)》
文章地址: https://zhuanlan.zhihu.com/p/20522487?columnSlug=FrontendMagazine
跑通了文章中示例,基本掌握了webpack,谢谢作者。
一些小的补充:
一、webpack.ProvidePlugin使用
文中仅给出了代码:
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ]
要require("webpack"),或者import,不然会报webpack is not defined的错误。我Node.js只是略懂,费了好大劲儿才解决。
二、Uncaught ReferenceError: __WEBPACK_AMD_DEFINE_ARRAY__ is not defined
如果启动后打开网页不显示任何内容,查看控制台报错信息为:Uncaught ReferenceError: __WEBPACK_AMD_DEFINE_ARRAY__ is not defined
应该是web服务没有启动完成,过一会儿再刷新页面就可以了。
三、控制台报错:Super expression must either be null or a function, not undefined
敲错了个字母,坑呀!
class App extends React.Compo ment
四、控制台报错:Unexpected character '@'
上面错误出现在加载bootstrap时,由于加载器参数有问题,将css、sass两个加载器分开写就可以了。
{test: /\.css$/, loader: "style!css"}, {test: /\.scss$/, loader: "style!css!sass"},
五、控制台报错:bootstrap tooltips require tether
似乎要装个插件,不影响使用,暂不管它。
六、执行搜索时,控制台报错:undefined is not a function
这个似乎是作者的一个笔误,plist.jsx文件改一下就行,将
import {get} from '../utils/ajax';
改为:
import get from '../utils/ajax';
七、ajax.js文件内容
这个文章中没有给出,可以从文章末尾很硬的链接中找到
export default function get(url) { return new Promise(function(resolve, reject) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(null); xhr.addEventListener('readystatechange', function() { if (xhr.readyState === 4 && xhr.status === 200) { try { const data = JSON.parse(xhr.responseText); resolve(data); } catch (e) { reject(e); } } }); xhr.addEventListener('error', function(error) { reject(error); }); }); }