webpack使用babel-loader轉換ES6代碼示例

本文介紹了webpack使用 babel-loader 轉換 ES6代碼示例，分享給大家，具體如下：

創(chuàng)新互聯(lián)是網(wǎng)站建設專家,致力于互聯(lián)網(wǎng)品牌建設與網(wǎng)絡營銷，專業(yè)領域包括做網(wǎng)站、網(wǎng)站建設、電商網(wǎng)站制作開發(fā)、成都微信小程序、微信營銷、系統(tǒng)平臺開發(fā)，與其他網(wǎng)站設計及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結合了恒基網(wǎng)絡品牌建設經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結合，且不斷評估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

查詢各個 loader的使用，可以在官網(wǎng)上查詢。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

（二）首先按照如下層級建立相應文件

webpack使用 babel-loader 轉換 ES6代碼示例

將測試用的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文件鏈接

    })
  ]
};

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站欄目：webpack使用babel-loader轉換ES6代碼示例
網(wǎng)頁路徑：http://chinadenli.net/article2/joisoc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、響應式網(wǎng)站、面包屑導航、網(wǎng)站營銷、網(wǎng)站建設、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

webpack使用babel-loader轉換ES6代碼示例