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