Webpack 之 babel-loader文件预处理器详解
loader官方解释是文件预处理器,通俗点说就是webpack在处理静态文件的时候,需要使用loader来加载各种文件,比如:html文件需要使用html-loader,css需要使用css-loader、style-loader等等。
今天我们来认识的是babel-loader,用来处理ES6语法,将其编译为浏览器可以执行的js语法。
安装
我们需要用到babel-loaderbabel-corebabel-preset
配合版本:webpack3.x|babel-loader8.x|babel7.x
npminstallbabel-loader@8.0.0-beta.0@babel/core@babel/preset-envwebpack webpack3.xbabel-loader7.x|babel6.x
使用
先来上一个小栗子:
varhtmlWebpackPlugin=require('html-webpack-plugin') constpath=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文件)优化处理加快速度 use:{ loader:'babel-loader', options:{//options选项中的presets设置的就是当前js的版本 presets:['@babel/preset-env'] } } } ] }, plugins:[ newhtmlWebpackPlugin({ template:'index.html', inject:'body', filename:'index.html' }) ] }
可以使用options属性来给loader传递选项。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。