Объединить, минимизировать и преобразовать в ES5 с WebPack и Babel

Question

У меня есть проект, который отлично работает и был написан на TS, мне пришлось преобразовать его в обычный JS, и он работает по большей части. Проблема, с которой я сталкиваюсь, заключается в удалении загрузчика WebPack по умолчанию после того, как файлы были объединены и сведены к минимуму. WebPack включает загрузчик для окончательного вывода, даже если мне не нужен загрузчик, так как все файлы объединены в один большой файл.

+ filea.js
+ fileb.js
+ filec.js
+ filed.js
-> output bundle.js

Я прочитал несколько статей / постов, в которых рекомендуется вручную создавать файл конфигурации с указанием имени каждого из файлов, которые будут объединены и уменьшены, это может работать нормально, но проблема в том, что проект I Я работаю над тем, чтобы разбить его на небольшие куски (модули), чтобы инструменты, такие как WebPack, были достаточно умными и знали, когда файл должен быть добавлен в качестве зависимости в окончательном выводе.

Я знаю, что мы можем объединять и минимизировать несколько отдельные JS файлы, но когда дело доходит до экспорта одного файла, кажется, что задача тривиальна для TS, но в ванильном мире JS мало или совсем нет информации о предмете.

Answer 1

Похоже, у вас есть проект с несколькими JS файлами, и вы хотите использовать веб-пакет, чтобы объединить их все и минимизировать результат.

Веб-пакет был создан для этого.

Вы Вам нужно будет добавить шаг сборки в ваш пакет. json примерно так:

"scripts": {
  "build": "webpack --config prod.config.js"
}

Затем вам нужно будет создать webpack.config. js с блоком module.exports, который имеет точка входа и правила для включения в ваш проект. Следующее должно быть минимальной настройкой, с которой можно начать:

const path = require('path');

module.exports = {
  entry: "./your/path/to/src",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {},
  plugins: [
    new MinifyPlugin(minifyOpts, pluginOpts)
  ]
}

You can add modules that perform additional code transpilation for files that matcha a certain regex. You can also use a plugin to perform minification such as babel-minify-webpack-plugin as documented here https://webpack.js.org/plugins/babel-minify-webpack-plugin/. (Note you will need to add this dependency.)

The full webpack configuration can be found here: https://webpack.js.org/configuration/

Answer 2

Я что-то не понимаю, вы хотите иметь один большой файл или маленькие отдельные модули (куски)?

Пример маленьких модулей:

module.exports = {  
  entry: {    
    app: './src/app.js',
    admin: './src/admin.js',
    contact: './src/contact.js'  
  }
};

Другой метод - один основной модуль и содержит все меньшие модули.

module.exports = {  
  entry: {    
    app: './src/app.js'  
  }
};

Вы также можете использовать что-то вроде отложенной загрузки. Тогда модули (чанки) будут динамически загружаться только при необходимости. отложенная загрузка

Вот пример использования нескольких записей webpack-шаблон .