webpack使用 babel-loader 轉換 ES6代碼示例
更新時間：2017年08月21日 16:55:54 作者：Herry彬
本篇文章主要介紹了webpack使用 babel-loader 轉換 ES6代碼 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
本文介紹了webpack使用 babel-loader 轉換 ES6代碼示例，分享給大家，具體如下：
查詢各個 loader的使用，可以在官網上查詢。https://www.npmjs.com
（一）安裝 babel-loader，babel-core。
使用命令
npm install --save-dev babel-loader babel-core
因為ES6語法每年都在更新，因此，我們需要一定的規(guī)則去轉換。
npm install --save-dev babel-preset-latest
（二）首先按照如下層級建立相應文件
將測試用的ES6代碼放在 app.js,使用CMD語法，將layer嵌入對象layer中。app.js代碼如下。
import layer from './components/layer/layer.js';
const App = function () {
console.log(layer);
}
new App();
layer.js代碼如下
function layer(){
return{
name:'layer',
tpl:'testTpl'
};
}
export default layer;
(三）webpack.config.js代碼如下
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
console.log(__dirname);
module.exports = {
/*context: __dirname,*/
entry: './src/app.js',
output: {
path: './dist',
filename: 'js/[name]-bound.js'//生成后的文件名 為 a-2ea5b2e9b258a8bbba73.js，main-2ea5b2e9b258a8bbba73.js
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
/*exclude: path.resolve(__dirname, 'node_modules'), //編譯時，不需要編譯哪些文件*/
/*include: path.resolve(__dirname, 'src'),//在config中查看 編譯時，需要包含哪些文件*/
query: {
presets: ['latest'] //按照最新的ES6語法規(guī)則去轉換
}
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', //通過模板生成的文件名
template: 'index.html',//模板路徑
inject: 'body' //是否自動在模板文件添加 自動生成的js文件鏈接
})
]
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇layui的表單驗證支持ajax判斷用戶名是否重復的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了如何利用jsPDF實現將圖片轉為pdf的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08
JS中typeof與instanceof之間的區(qū)別總結
本文是對JS中typeof與instanceof之間的區(qū)別進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
本文主要介紹了微信小程序手機號驗證碼登錄的項目實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
本篇文章主要介紹了詳解cordova打包成webapp的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
徹底搞懂JavaScript中的apply和call方法(必看)
下面小編就為大家?guī)硪黄獜氐赘愣甁avaScript中的apply和call方法(必看)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
擴展js對象數組的OrderByAsc和OrderByDesc方法實現思路
js的擴展方法是基于原型的，如Array.prototype.XXXX就是給Array擴展XXX方法，然后數組都能使用這個方法了，在對象數組里面經常有根據屬性來進行排序的，升序，降序的，下面與大家分享自己寫的一個2013-05-05
下面小編就為大家?guī)硪黄猨s事件驅動機制 瀏覽器兼容處理方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了JavaScript基于面向對象實現的無縫滾動輪播,結合實例形式分析了JavaScript面向對象實現的無縫滾動輪播相關對象定義、初始化及功能實現技巧,需要的朋友可以參考下2020-01-01
javascript動態(tài)添加刪除tabs標簽的方法
這篇文章主要介紹了javascript動態(tài)添加刪除tabs標簽的方法,實例分析了javascript針對tabs標簽的動態(tài)添加與刪除方法,涉及javascript頁面元素的操作技巧,需要的朋友可以參考下2015-07-07