今天继续学习Webpack技术。
文章是这篇 入门Webpack,看这篇就够了
Babel其实可以在webpack.config.js中进行配置,但是babel有非常多的配置选项,在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂,因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。(webpack会自动调用.babelrc里的babel配置选项)
我这边是mac,默认设置中,这种.babelrc文件是看不见得,而且还不好打开。
于是别的地方找到了打开关闭系统隐藏文件的显示的命令,分别如下:
早期的OS X(10.6~10.8)系统:
//显示隐藏文件
defaults write com.apple.Finder AppleShowAllFiles Yes && killall Finder
//不显示隐藏文件
defaults write com.apple.Finder AppleShowAllFiles No && killall Finder
OS X 10.9 Mavericks版本之后:
//显示隐藏文件
defaults write com.apple.finder AppleShowAllFiles Yes && killall Finder
//不显示隐藏文件
defaults write com.apple.finder AppleShowAllFiles No && killall Finder
当然最简单的是这个: Command+Shift+. 可以显示隐藏文件、文件夹,再按一次,恢复隐藏。但是貌似支持的是10.12以后版本,但是还是相当方便不是么,还不用怕输错字了会麻烦。
在Webpack中,一切文件都是模块,包括css以及图片。
通常情况下,css会和js打包到同一个文件中,并不会打包为一个单独的css文件,不过通过合适的配置webpack也可以把css打包为单独的文件的。
不过这也只是webpack把css当做模块而已,咱们继续看看一个真的CSS模块的实践。
CSS module,它意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。这样就可以放心使用,即使相同的类名也不会造成不同组件之间的污染。
CSS module官方文档CSS module
未完待续,明天继续。。