Description
Webpack is an asset bundler, its purpose is to compile your JavaScript code to be the most efficient possible for production.
Table of Contents
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' }));
});
}
};