学习webpack

　　很好的文章：

　　《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);
    });
  });
}

猜你喜欢