Description

Webpack is an asset bundler, its purpose is to compile your JavaScript code to be the most efficient possible for production.

[TOC]

Features

• Bundle your JavaScript using EcmaScript 2015 imports or commonjs imports
• Your code is Uglified after compilation.
• Configurable output formats
• Watch mode, re-compiles your files on changes
• Analyze your bundles with --analyze which will create a stats file next to the generated JavaScript
• Profile Webpack's execution time with --analyze

Configuration

Options

We don't provide any option to configure Webpack outside bundles, but as crafty.config.js is considered as a preset, you can define the webpack override method in your configuration file and change the configuration to your needs.

Check the Extending the configuration section below for more information on that.

Bundle Options

| Option | Type | Optional ? | Runner | Description | | --------------- | ------------------- | ---------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | hot | Boolean | Yes | Webpack | Allows to use Hot Module Replacement in watch mode (false by default) | | libraryTarget | String | Yes | Webpack | Define the library type to export. By default we use amd. Possible values | | library | String | Yes | Webpack | Define the library name for the Webpack module or export. | | externals | Array<String> | Yes | Webpack | Extends the list of provided libraries (Webpack understands both globs and strings) |

Extending the configuration

Extending Webpack's configuration can be done in two different way, either with a webpack.config.js file or with the webpack extension point

webpack.config.js

In this solution, you have to create a webpack.config.js file next to your package.json.

This file should contain the configuration you wish to change, the rest being already configured inside Crafty we will merge your custom settings.

This solution is a bit less powerful than the extension point: You can replace configuration but you can't remove loaders and you can't change the loader's configuration.

webpack(crafty, bundle, chain)

Each preset and crafty.config.js can define the webpack(crafty, bundle, chain) function to override Webpack configuration.

Webpack's configuration is built using webpack-chain which is a configuration builder.

module.exports = {
  /**
   * Represents the extension point for Webpack configuration
   * @param {Crafty} crafty - The instance of Crafty.
   * @param {Object} bundle - The bundle that is being prepared for build (name, input, source, destination)
   * @param {WebpackChain} chain - The current Webpack configuration using `webpack-chain`
   */
  webpack(crafty, bundle, chain) {
    // Change any value of the chain object

    // For example, adding supported extensions to the resolution
    chain.resolve.extensions.add(".ts").add(".tsx").add(".mts").add(".cts");

    // For example to add a reverse proxy
    chain.devServer.set("middleware", (app, builtins) => {
    app.use(builtins.proxy('/hey', { target: 'https://google.com' }));
});

  }
};