Bundle and minify JavaScript with webpack using eleventy-load
npm install eleventy-load-jssh
npm install --save-dev eleventy-load eleventy-load-js eleventy-load-html eleventy-load-file
`
Then you can set up eleventy-load-js using a rule in your eleventy-load options.
`js
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(require("eleventy-load"), {
rules: [
{
test: /\.html$/,
loaders: [
{
loader: require("eleventy-load-html"),
},
],
},
{
test: /\.js$/,
loaders: [
{
loader: require("eleventy-load-js"),
options: {
mode: "production",
},
},
{
loader: require("eleventy-load-file"),
},
],
},
],
});
};
`
Options
| Name | Type | Default | Description |
| ---------------------- | -------- | --------- | ------------------- |
| webpack | Object | See below | Options for webpack |
$3
Type: Object
Pass options to the webpack configuration. By default, eleventy-load-js is configured to use the project's input directory as the webpack context and uses an in-memory file system for webpack's output.
`js
{
context: path.resolve(this.config.inputDir),
entry: [path.resolve(this.config.inputDir, this.resourcePath)],
mode: "production",
}
``