溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了webpack使用 babel-loader 轉換 ES6代碼示例，分享給大家，具體如下：
查詢各個 loader的使用，可以在官網上查詢。https://www.npmjs.com
（一）安裝 babel-loader，babel-core。
使用命令
npm install --save-dev babel-loader babel-core
因為ES6語法每年都在更新，因此，我們需要一定的規則去轉換。
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語法規則去轉換
}
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', //通過模板生成的文件名
template: 'index.html',//模板路徑
inject: 'body' //是否自動在模板文件添加 自動生成的js文件鏈接
})
]
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
