https://github.com/gregives/eleventy-load-js

Bundle and minify JavaScript with webpack using eleventy-load
https://github.com/gregives/eleventy-load-js

eleventy eleventy-load webpack

Last synced: 9 days ago
JSON representation

Bundle and minify JavaScript with webpack using eleventy-load

• Host: GitHub
• URL: https://github.com/gregives/eleventy-load-js
• Owner: gregives
• License: mit
• Created: 2020-11-18T21:12:24.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-06-29T20:32:33.000Z (over 3 years ago)
• Last Synced: 2024-12-29T13:19:23.584Z (about 1 month ago)
• Topics: eleventy, eleventy-load, webpack
• Language: JavaScript
• Homepage:
• Size: 167 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# eleventy-load-js

[![npm version][npm-version-src]][npm-version-href]

[![npm downloads][npm-downloads-src]][npm-downloads-href]

[![License][license-src]][license-href]

[![Prettier][prettier-src]][prettier-href]

Bundle and minify JavaScript with webpack using [eleventy-load](https://github.com/gregives/eleventy-load).

## Getting Started

Firstly, you'll need to install [eleventy-load](https://github.com/gregives/eleventy-load) (if you haven't already) and eleventy-load-js. You'll probably want to use eleventy-load-js in combination with [eleventy-load-html](https://github.com/gregives/eleventy-load-html) and [eleventy-load-file](https://github.com/gregives/eleventy-load-file), so we'll install those as well. The latter writes the output of eleventy-load-js to a file which will be saved in Eleventy's output directory, which is the behavior you often want for JavaScript.

```sh

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`**](#name) | `Object` | See below | Options for webpack |

### `webpack`

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",

}

```

[npm-version-src]: https://img.shields.io/npm/v/eleventy-load-js/latest.svg

[npm-version-href]: https://npmjs.com/package/eleventy-load-js

[npm-downloads-src]: https://img.shields.io/npm/dt/eleventy-load-js.svg

[npm-downloads-href]: https://npmjs.com/package/eleventy-load-js

[license-src]: https://img.shields.io/npm/l/eleventy-load-js.svg

[license-href]: https://npmjs.com/package/eleventy-load-js

[prettier-src]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg

[prettier-href]: https://github.com/prettier/prettier