快捷導(dǎo)航

Webpack 之 babel-loader文件預(yù)處理器詳解

更新時(shí)間：2018年03月23日 14:04:50 作者：Meils

這篇文章主要介紹了Webpack 之 babel-loader文件預(yù)處理器詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

loader官方解釋是文件預(yù)處理器，通俗點(diǎn)說就是webpack在處理靜態(tài)文件的時(shí)候，需要使用 loader 來加載各種文件，比如： html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。

今天我們來認(rèn)識的是 babel-loader，用來處理ES6語法，將其編譯為瀏覽器可以執(zhí)行的js語法。

安裝

我們需要用到 babel-loader babel-core babel-preset

配合版本： webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
webpack 3.x babel-loader 7.x | babel 6.x

使用

先來上一個(gè)小栗子：

var htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/, // (不處理node_modules 和 bower_components下的js文件) 優(yōu)化處理加快速度
        use: {
          loader: 'babel-loader',
          options: {     // options選項(xiàng)中的presets設(shè)置的就是當(dāng)前js的版本
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'index.html',
      inject: 'body',
      filename: 'index.html'
    })
  ]
}

可以使用 options 屬性來給 loader 傳遞選項(xiàng)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

webpack使用 babel-loader 轉(zhuǎn)換 ES6代碼示例

相關(guān)文章

微信小程序?qū)崿F(xiàn)收縮式菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)收縮式菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JS 非圖片動(dòng)態(tài)loading效果實(shí)現(xiàn)代碼
功能說明：譬如在按某個(gè)button時(shí)，顯示消息"Loading”，然后每隔一秒后后面加上"."，至一定數(shù)量的"."時(shí)如："Loading..."，再重置此消息為"Loading"，繼續(xù)動(dòng)態(tài)顯示，直至按鈕事件處理完成。
2010-04-04
JavaScript高級程序設(shè)計(jì) 閱讀筆記（二十） js錯(cuò)誤處理
語法錯(cuò)誤,也稱解析錯(cuò)誤，發(fā)生在傳統(tǒng)語言的編譯時(shí)，在JavaScript中發(fā)生在解釋時(shí),運(yùn)行時(shí)錯(cuò)誤也稱為異常（exception，在編譯期/解釋器后）
2012-08-08
JavaScript監(jiān)聽觸摸事件代碼實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽觸摸事件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
詳談javascript異步編程
這篇文章主要為大家詳細(xì)介紹了javascript異步編程，其實(shí)作為一種編程語言Javascript的異步編程是一個(gè)非常值得討論的有趣話題，感興趣的小伙伴們可以參考一下
2016-02-02
BootStrap下拉菜單和滾動(dòng)監(jiān)聽插件實(shí)現(xiàn)代碼
這篇文章主要介紹了BootStrap下拉菜單和滾動(dòng)監(jiān)聽插件實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
我的javascript 函數(shù)鏈之演變
我的javascript 函數(shù)鏈之演變,需要的朋友可以參考下。
2011-04-04
微信小程序開發(fā)之實(shí)現(xiàn)心情記事本
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡單的心情記事本，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下
2023-01-01
純JS實(shí)現(xiàn)監(jiān)控本地文件變化
你是否曾夢想擁有一個(gè)能夠?qū)崟r(shí)監(jiān)控本地文件變化的網(wǎng)頁應(yīng)用,現(xiàn)在,這個(gè)夢想即將成為現(xiàn)實(shí),本文將通過純JS實(shí)現(xiàn)這一功能,感興趣的小伙伴可以了解下
2025-04-04
JS script腳本中async和defer區(qū)別詳解
這篇文章主要介紹了JS script腳本中async和defer區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06