script-loader

0.7.2 verified Sat Apr 25 auth: no javascript maintenance

A webpack loader that executes JavaScript files once in the global context, useful for loading legacy scripts or libraries that pollute the global scope. Current stable version is 0.7.2, last released September 2017. This loader is part of the webpack-contrib organization and has minimal dependencies. It differs from imports-loader or expose-loader by executing scripts directly, without module wrapping. Does not work in Node.js; designed exclusively for browser bundles. The project is effectively in maintenance mode with no recent updates.

Common errors

error Module build failed: TypeError: Cannot read property 'replace' of undefined ↓

cause The loader is being used on a file that doesn't exist or is not properly resolved.

fix

Ensure the file path is correct and webpack can resolve it. For inline usage, verify the path after 'script-loader!'.

error Uncaught ReferenceError: <variable> is not defined ↓

cause The script expects certain global variables to exist before execution, but they are not defined.

fix

Load dependencies in the correct order using multiple rules or ensure the global environment includes the needed definitions (e.g., via expose-loader).

Warnings

gotcha script-loader does not work in Node.js; it is intended for browser bundles only. ↓

fix Do not use script-loader in Node.js. If needed, consider node-specific alternatives or dynamic require.

gotcha Scripts loaded with script-loader are executed in the global context, not in module scope. Variables declared without var/let/const will leak to window. ↓

fix Use script-loader only for scripts that intentionally pollute global scope (e.g., jQuery plugins). Use 'use strict' to prevent accidental globals.

gotcha Script loader does not support query parameters; all configuration must be done via webpack config rules. ↓

fix If you need options, consider using 'imports-loader' or 'expose-loader' instead.

Install

npm install script-loader

yarn add script-loader

pnpm add script-loader

Imports

default import (webpack loader)
wrong
```
import exec from './script.js'; // no loader
```
correct
```
import exec from 'script-loader!./script.js';
```
Use as a webpack loader via inline import or in webpack.config.js rules.

require with loader

wrong

const exec = require('./script.js'); // missing script-loader

correct

const exec = require('script-loader!./script.js');

CommonJS require works as well.

webpack.config.js rule
wrong
```
use: ['script-loader?'] // no query params supported
```
correct
```
use: ['script-loader']
```
Configure via module.rules for files matching pattern like *.exec.js.

Quickstart

Configures script-loader to execute .exec.js files in the global context. Shows installation, webpack config, and a sample script that sets a global variable.

# Install
npm install --save-dev script-loader

# webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.exec\.js$/,
        use: ['script-loader']
      }
    ]
  }
};

# Example script.js
// script.exec.js or import with script-loader! prefix
// This file runs in global context
var globalVar = 'I am global';