2017-08-08读书笔记（Webpack学习笔记4）

今天继续学习Webpack技术。

文章是这篇 入门Webpack，看这篇就够了

接下来是Babel。它是一个编译JavaScript的平台，它可以将下一代的JavaScript标准（ES6，ES7）转译成ES5的代码。而且可以转移比如React的JSX这类的js拓展语言。

接下去demo中使用的是react，我用的编辑器是sublime，在默认的语言中是没有jsx的，没有语法识别高亮看着很难受。于是我专门搜了一下怎么装插件。

打开插件管理器的快捷键是ctrl+shift+p。

1. 首先使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行，mac就乖乖的使用后者吧。
2. 输入import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) 然后回车就会自动安装。此时就可以在Preferences菜单下看到Package Settings和Package Control两个菜单了。
3. 然后使用ctrl+shift+p（MacCmd+shift+p）打开面板。
   输入Install Package，按回车开始装install package。
   输入babel，并安装

4. 装完之后就可以在右下角切换到
   

   image.png

   就大功告成啦

image.png

在这个demo中，作者又一次，将名字没对应起来，下面这个配置应是这样
loader: 'babel-loader',

今天看到这里，应该这周能把这篇文章看完，大致也算是入门了吧。最近有点忙，我下周尽量多看些。