Webpack 和 Babel 是前端开发中常用的两个工具,但它们有不同的主要功能和定位:
babel-loader
、css-loader
、file-loader
等。HtmlWebpackPlugin
、DefinePlugin
等。@babel/preset-env
、@babel/plugin-transform-runtime
等。babel-loader
使用。在现代前端项目中,Webpack 和 Babel 通常会结合使用,发挥各自的优势:
示例配置:
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
{
"presets":
["@babel/preset-env"]
}
通过结合使用 Webpack 和 Babel,可以实现现代前端开发的模块化、优化和兼容性支持。