1. npm-install-webpack-plugin
Webpack loader to automatically npm install & save dependencies.
npm-install-webpack-plugin
Package: npm-install-webpack-plugin
Created by: ericclemmons
Last modified: Wed, 22 Jun 2022 08:02:35 GMT
Version: 4.0.5
License: MIT
Downloads: 12,310
Repository: https://github.com/ericclemmons/npm-install-webpack-plugin

Install

npm install npm-install-webpack-plugin
yarn add npm-install-webpack-plugin

npm
deps
test
coverage
chat

NPM Install Webpack Plugin

Speed up development by automatically installing & saving dependencies with Webpack.

It sucks to Ctrl-C your
build script & server just to install
a dependency you didn't know you needed until now.

Instead, use require or import how you normally would and npm install
will happen automatically to install & save missing dependencies while you work!

Install

 $ npm install --save-dev npm-install-webpack-plugin

Usage

In your webpack.config.js:

 plugins: [
  new NpmInstallPlugin();
],

This is equivalent to:

 plugins: [
  new NpmInstallPlugin({
    // Use --save or --save-dev
    dev: false,
    // Install missing peerDependencies
    peerDependencies: true,
    // Reduce amount of console logging
    quiet: false,
    // npm command used inside company, yarn is not supported yet
    npm: 'tnpm'
  });
],

You can provide a Function to the dev to make it dynamic:

 plugins: [
  new NpmInstallPlugin({
    dev: function(module, path) {
      return [
        "babel-preset-react-hmre",
        "webpack-dev-middleware",
        "webpack-hot-middleware",
      ].indexOf(module) !== -1;
    },
  }),
],

Demo

npm-install-webpack-plugin mp4

Features

  • [x] Works with both Webpack ^v1.12.0 and ^2.1.0-beta.0.
  • [x] Auto-installs .babelrc plugins & presets.
  • [x] Supports both ES5 & ES6 Modules.
    (e.g. require, import)
  • [x] Supports Namespaced packages.
    (e.g. @cycle/dom)
  • [x] Supports Dot-delimited packages.
    (e.g. lodash.capitalize)
  • [x] Supports CSS imports.
    (e.g. @import "~bootstrap")
  • [x] Supports Webpack loaders.
    (e.g. babel-loader, file-loader, etc.)
  • [x] Supports inline Webpack loaders.
    (e.g. require("bundle?lazy!./App")
  • [x] Auto-installs missing peerDependencies.
    (e.g. @cycle/core will automatically install rx@*)
  • [x] Supports Webpack's resolve.alias & resolve.root configuration.
    (e.g. require("react") can alias to react-lite)

Maintainers


Eric Clemmons

Jonny Buchanan

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin