Webpack 之 babel-loader文件預(yù)處理器詳解
loader官方解釋是文件預(yù)處理器,通俗點(diǎn)說(shuō)就是webpack在處理靜態(tài)文件的時(shí)候,需要使用 loader 來(lái)加載各種文件,比如: html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。
今天我們來(lái)認(rèn)識(shí)的是 babel-loader,用來(lái)處理ES6語(yǔ)法,將其編譯為瀏覽器可以執(zhí)行的js語(yǔ)法。
安裝
我們需要用到 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
使用
先來(lái)上一個(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 屬性 來(lái)給 loader 傳遞選項(xiàng)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js中各種數(shù)據(jù)類型檢測(cè)和判定的實(shí)戰(zhàn)示例
typeof一般被用于判斷一個(gè)變量的類型,我們可以利用typeof來(lái)判斷number,string,object,boolean,function,undefined,symbol這七種類型,下面這篇文章主要給大家介紹了關(guān)于js中各種數(shù)據(jù)類型檢測(cè)和判定的相關(guān)資料,需要的朋友可以參考下2022-11-11基于JavaScript實(shí)現(xiàn)前端文件的斷點(diǎn)續(xù)傳
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)前端文件的斷點(diǎn)續(xù)傳的相關(guān)資料,需要的朋友可以參考下2016-10-10web3.js增加eth.getRawTransactionByHash(txhash)方法步驟
這篇文章主要介紹了web3.js增加eth.getRawTransactionByHash(txhash)方法步驟,需要的朋友可以參考下2018-03-03JavaScript中偽協(xié)議 javascript:使用探討
javascript:這個(gè)特殊的協(xié)議類型聲明了URL的主體是任意的javascript代碼,它由javascript的解釋器運(yùn)行2014-07-07使用Vue3實(shí)現(xiàn)一個(gè)Upload組件的示例代碼
這篇文章主要介紹了使用Vue3實(shí)現(xiàn)一個(gè)Upload組件的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05讓firefox支持IE的一些方法的javascript擴(kuò)展函數(shù)代碼
因?yàn)橐恍┐a,只能在IE下實(shí)現(xiàn),如果用firefox實(shí)現(xiàn)就必須用一些擴(kuò)展函數(shù)。2010-01-01一個(gè)對(duì)于js this關(guān)鍵字的問(wèn)題
一個(gè)對(duì)于js this關(guān)鍵字的問(wèn)題...2007-01-01一文詳解Proxy和Object.defineProperty的使用與區(qū)別
在JavaScript中,對(duì)象是一種核心的數(shù)據(jù)結(jié)構(gòu),而對(duì)對(duì)象的操作也是開(kāi)發(fā)中經(jīng)常遇到的任務(wù),本文將深入比較Proxy和Object.defineProperty,感興趣的小伙伴可以了解下2023-12-12JavaScript字符串的json的自定義加密解密函數(shù)示例
JavaScript自定義函數(shù)中使用String.fromCharCode函數(shù)將輸入字符串中每個(gè)字符的Unicode編碼加1,然后將加密后的字符拼接成一個(gè)新字符串返回,調(diào)用JSON.stringify函數(shù)轉(zhuǎn)換json成一個(gè)普通字符串2023-12-12