gregives / eleventy-load-js

Bundle and minify JavaScript with webpack using eleventy-load

eleventy-load-js

Bundle and minify JavaScript with webpack using eleventy-load.

Getting Started

Firstly, you'll need to install 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 and 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.

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.

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

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.

{
  context: path.resolve(this.config.inputDir),
  entry: [path.resolve(this.config.inputDir, this.resourcePath)],
  mode: "production",
}