Babel не работает
Вернее сказать работает как то странно. Настройки по документации webpack и babel. В webpack.config.js:
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
В babel.config.json:
{
"presets": [
"@babel/preset-env"
]
}
В итоговом коде после сборки я получаю его работу, он делает полифилы, меняет мне const на var и прочее, но смысл от всего этого если он оборачивает свой код в arrow function? Которые не поддерживаются в ie 11 допустим. Что за троллинг такой я не пойму.
Весь конфиг:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;
module.exports = {
mode: 'development',
entry: {
main: path.resolve(__dirname, 'src/scripts', 'index.js')
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: ''
},
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve('src', 'index.html'),
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].style.css',
})
],
optimization: {
minimize: isProd,
minimizer: [
new CssMinimizerPlugin({
sourceMap: true,
}),
new TerserPlugin()
],
}
}
Ответы (1 шт):
Насколько я помню по умолчанию babel делает издевательскую вещь - приводит код к es5 стандарту и оборачивает это все в анонимную функцию, которая является стандартом es6. Нужно указывать свойство target, и указать его можно в файле .babel*, в webpack.config.js в лоадерах или даже в package.json (по моему многие плагины оперируют свойством browserlist оттуда или даже отдельным файлом .browserlist, если я не ошибся в названиях)