本文介紹了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文件鏈接 }) ]};以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
