webpack 3.X學習之Babel配置

Babel是什麼

Babel是一個編譯JavaScript的平臺，它的強大之處表如今能夠經過編譯幫你達到：

• 使用下一代的javascript（ES6，ES7,……）代碼，即便當前瀏覽器沒有完成支持；
• 使用基於JavvScript進行擴展語言，好比React的JSX；

webpack配置Babel

安裝依賴包：

npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-env

• babel-core：babel的核心包；
• babel-loader：babel的loader包；
• babel-preset-es2015：解析es6的包；
• babel-preset-env：解析es6的包；（官方最新推薦）
• babel-preset-react：解析React的JSX的包；

在webpack.config.js中配置babel:

module:{
    rules:[
        {
            test:'/\.(js|jsx)$/',
            use:{
                loader:'babel-loader'
            },
            exclude:/node_module/
        }
    ]
}

在根目錄下創建.babelrc文件，雖然Babel能夠直接在webpack.config.js中進行配置，可是考慮到babel具備很是多的配置選項，若是卸載webapck.config.js中會很是的雍長不可閱讀，因此咱們常常把配置卸載.babelrc文件裏。

.babelrc

{
    "presets":["env","react"]
}

參考地址：

• https://github.com/zhuangZhou/webpack_demo
• http://jspang.com/2017/09/16/webpack3-2/#15webpackbabel