Giter Club home page Giter Club logo

webpack-asset-relocator-loader's Introduction

Asset Relocator Loader for Webpack

Build Status codecov

Asset relocation loader used in ncc for performing Node.js builds while emitting and relocating any asset references.

Usage

Installation

npm i -g @zeit/webpack-asset-relocator-loader

Usage

Add this loader as a Webpack plugin for any JS files.

Any .node files included will also support binary relocation.

{
  target: "node",
  output: {
    libraryTarget: "commonjs2"
  },
  module: {
    rules: [
      {
        // For node binary relocations, include ".node" files as well here
        test: /\.(m?js|node)$/,
        // it is recommended for Node builds to turn off AMD support
        parser: { amd: false },
        use: {
          loader: '@zeit/webpack-asset-relocator-loader',
          options: {
            // optional, base folder for asset emission (eg assets/name.ext)
            outputAssetBase: 'assets',
            // optional, a list of asset names already emitted or
            // defined that should not be emitted
            existingAssetNames: []
            wrapperCompatibility: false, // optional, default
            escapeNonAnalyzableRequires: false, // optional, default

          }
        }
      }
    ]
  }
}

Assets will be emitted using emitAsset, with their references updated in the code by the loader to the new output location.

How it Works

Asset Relocation

Assets are detected using static analysis of code, based on very specific triggers designed the the most common Node.js workflows to provide build support for a very high (but not perfect) level of compatibility with existing Node.js libraries.

Currently only __filename and __dirname references provide an initial trigger to an asset load.

Static analysis determines these expressions, and if they can be evaluated to an exact asset location, the expression is replaced with a new expression to the relocated asset and the asset emitted. In addition. A fairly comprehensive variety of expression cases are supported here, which is improving over time, but there will still be edge cases the analysis cannot detect.

Support for require.resolve, import.meta.url or even path-like environment variables could also be added as triggers in future.

Binary Relocation

Node binary loading conventions cover the following triggers for binary relocations:

  • require('bindings')(...)
  • nbind.init(..)
  • node-pre-gyp include patterns

Any shared libraries loaded by these binaries will also be emitted as well.

Node.js Compatibility Features

In addition to asset relocation, this loader also provides a couple of compatibility features for Webpack Node.js builds as part of its analysis.

These include:

  • require.main === module checks are retained for the entry point being built.
  • options.wrapperCompatibility: Automatically handles common AMD / Browserify wrappers to ensure they are properly built by Webpack. See the utils/wrappers.js file for the exact transformations currently provided.
  • options.escapeNonAnalyzableRequires: Determines when a require statement is definitely not analyzable by Webpack, and replaces it with the outer __non_webpack_require__. This is useful for things like plugin systems that take a pluginModule string and then try to require it, but still won't correcly support contextual requires for local modules.

webpack-asset-relocator-loader's People

Contributors

guybedford avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.