詳解webpack 配合babel 將es6轉成es5 超簡單一實例，webpackes5

詳解webpack 配合babel 將es6轉成es5 超簡單一實例，webpackes5

今天接觸了webpack，第一次使用webpack進行轉碼，竟然稀裡糊塗就成功了，哈哈。

下面附上流程

建立個檔案夾，初始化一下，首先全域安裝webpack

npm install webpack --save-dev 

然後安裝babel

npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader 

在當前檔案夾內執行安裝，然後建立兩個檔案夾一個src作為源檔案夾，一個bin，儲存產生的檔案夾的列表

在src檔案夾內建立一個檔案app.js，裡面寫入現在瀏覽器不全支援的es6代碼

let a = 111; let b = 222; var xxx = (c,d) => c*d; console.log(xxx(a,b)); 

然後在根目錄建立一個檔案名稱為webpack.config.js

module.exports = {   entry: './src/app.js',   output: {     path: './bin',     filename: 'app.bundle.js',   },   module: {     loaders: [{       test: /\.js$/,       exclude: /node_modules/,       loader: 'babel-loader'     }]   } } 

然後再建立一個用於babel調用的檔案，名為.babelrc

裡面寫入

{ "presets": [ "es2015" ] } 

然後在目前的目錄開啟cmd，

運行命令 webpack

如果出現綠色的，證明成功了

然後去bin目錄裡面找到app.bundle.js發現裡面下面會有這段代碼

function(module, exports) {  "use strict";  var a = 111; var b = 222; var xxx = function xxx(c, d) {  return c * d; }; console.log(xxx(a, b)); 

證明轉碼成功~~~~

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。