Webpack入門（4）

Webpack4 babel轉換

es6 es7 有些語法瀏覽器是不識別的，這就是babel的作用，將其轉換成瀏覽器可識別的語法。

想要轉化，第一步先要安裝babel-core

npm install babel-core

然後在項目根目錄創建 .babelrc （自動載入的文件）

touch .babelrc

.babelrc 一個json文件，需要在其中配置。

在入口文件寫一個箭頭函數（以箭頭函數為例子）

然後安裝一個插件 transform-es2015-arrow-functions

npm intall babel-plugin-transform-es2015-arrow-functions

這個插件的作用就是將箭頭函數轉化成es2015的插件

然後配置.babelrc文件

{ "plugins": [ "transform-es2015-arrow-functions" ]}

為了可以使用babel進行轉換，要先全局安裝一下babel-cli

sudo npm install -g babel-cli

安裝完成後，在控制台輸入

babel src/main.js

這時，控制台就已經轉換成功了

require(./main.css);require(./index.html);var a = function () { console.log(1111);};

然後接下來需要到webpack.dev.js 中配置一下剛才的babel設置 babel-loader

rules:[ // js loader { test:/.js$/, use:[ { loader:"babel-loader" } ], // 忽略不需要轉換的文件 exclude:/node_modules/ }]

ok,配置玩webpack.dev.js後 就可以在控制台直接 npm start 和 npm run build 了

這時，打包後的是已經轉換好的了

emmmm 當然如果需要其它的轉化，可以直接安裝其插件，再配置一下.babelrc 就可以了

推薦閱讀：