Webpack 之 babel

Webpack 之 babel

loader官方解释是文件预处理器，通俗点说就是webpack在处理静态文件的时候，需要使用 loader 来加载各种文件，比如： html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。

今天我们来认识的是 babel-loader，用来处理ES6语法，将其编译为浏览器可以执行的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

使用

先来上一个小栗子：

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:ufWrJDf [

{

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: [

new htmlWebpackPlugin({

template: 'index.html',

inject: 'bodyufWrJDf',

filename: 'index.html'

})

]

}

可以使用 options 属性 来给 loader 传递选项。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。