Разделение задач в webpack

Question

На представленном ниже конфиге можно сбилдить js под ES5 либо под ES2015 +, но не могу сконфигурировать так, чтобы билдилось 2 файла, а не 1. Буду рад помощи! Для тех кто хочется потыкать есть репо - https://github.com/krovorgen/template-webpack-typescript

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

const isDev = process.env.NODE_ENV === 'development';
const isProd = process.env.NODE_ENV === 'production';

const filename = (ext) => (isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`);

const optimization = () => {
  const configObj = {
    splitChunks: {
      chunks: 'all',
    },
  };

  if (isProd) {
    configObj.minimizer = [`...`, new CssMinimizerPlugin()];
  }

  return configObj;
};

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  devServer: {
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, 'app'),
    open: true,
    compress: true,
    hot: true,
    port: 3000,
  },
  entry: './js/main.js',
  output: {
    filename: `./js/${filename('js')}`,
    path: path.resolve(__dirname, 'app'),
    publicPath: '',
  },
  devtool: isProd ? false : 'source-map',
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: '> 0.25%, not dead' }]],
          },
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: {
                    browsers: [
                      'Chrome >= 60',
                      'Safari >= 10.1',
                      'iOS >= 10.3',
                      'Firefox >= 54',
                      'Edge >= 15',
                    ],
                  },
                },
              ],
            ],
          },
        },
      },
    ],
  },
  optimization: optimization(),
};

Answer 1

Получилось решить проблему по совету выше. Команда для запуска получилась:

"es5:prod": "cross-env NODE_ENV=production webpack --config-name es5 --config-name es6 --mode production",

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

const isDev = process.env.NODE_ENV === 'development';
const isProd = process.env.NODE_ENV === 'production';

const fileName = 'core';

const optimizations = () => ({
  minimize: true,
  minimizer: [new TerserPlugin()],
});

module.exports = [
  {
    name: 'es5',
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: `./js/${fileName}.js`,
    output: {
      filename: `${fileName}.es5.min.js`,
      path: path.resolve(__dirname, 'app'),
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [['@babel/preset-env', { targets: '> 0.25%, not dead' }]],
            },
          },
        },
      ],
    },
    optimization: optimizations(),
  },
  {
    name: 'es6',
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: `./js/${fileName}.js`,
    output: {
      filename: `${fileName}.es6.min.js`,
      path: path.resolve(__dirname, 'app'),
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    targets: {
                      browsers: [
                        'Chrome >= 60',
                        'Safari >= 10.1',
                        'iOS >= 10.3',
                        'Firefox >= 54',
                        'Edge >= 15',
                      ],
                    },
                  },
                ],
              ],
            },
          },
        },
      ],
    },
    optimization: optimizations(),
  },
];

БЛОГ НА HUSL

Разделение задач в webpack

Ответы (1 шт):