All Projects โ†’ 1337programming โ†’ Webpack Shell Plugin

1337programming / Webpack Shell Plugin

Licence: mit
Run shell commands either before or after webpack builds

Programming Languages

javascript
184084 projects - #8 most used programming language
shell
77523 projects

Projects that are alternatives of or similar to Webpack Shell Plugin

Multipage Webpack Plugin
A plugin that makes handling templates and asset distribution for multi-page applications using webpack trivial
Stars: โœญ 168 (-32.8%)
Mutual labels:  webpack, webpack-plugin
Emojify Webpack Plugin
๐Ÿฆ„ Turn your code into emoji
Stars: โœญ 178 (-28.8%)
Mutual labels:  webpack, webpack-plugin
React Core Boilerplate
Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support
Stars: โœญ 169 (-32.4%)
Mutual labels:  webpack, webpack-plugin
Svg Spritemap Webpack Plugin
SVG spritemap plugin for webpack
Stars: โœญ 160 (-36%)
Mutual labels:  webpack, webpack-plugin
Hard Source Webpack Plugin
www.npmjs.com/package/hard-source-webpack-plugin
Stars: โœญ 2,608 (+943.2%)
Mutual labels:  webpack, webpack-plugin
Virtual Module Webpack Plugin
Adds the contents of a virtual file to webpack's cached file system without writing it to disk
Stars: โœญ 165 (-34%)
Mutual labels:  webpack, webpack-plugin
Workerize Loader
๐Ÿ—๏ธ Automatically move a module into a Web Worker (Webpack loader)
Stars: โœญ 2,135 (+754%)
Mutual labels:  webpack, webpack-plugin
Bundle Stats
In-depth bundle analyzer for webpack(bundle size, assets, modules, packages)
Stars: โœญ 144 (-42.4%)
Mutual labels:  webpack, webpack-plugin
Unused Files Webpack Plugin
Glob all files that are not compiled by webpack under webpack's context
Stars: โœญ 210 (-16%)
Mutual labels:  webpack, webpack-plugin
Bundle Buddy Webpack Plugin
๐Ÿ๐Ÿ๐Ÿ๐Ÿ bundle-buddy-webpack-plugin ๐Ÿ๐Ÿ๐Ÿ๐Ÿ
Stars: โœญ 199 (-20.4%)
Mutual labels:  webpack, webpack-plugin
Clean Webpack Plugin
By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild.
Stars: โœญ 1,888 (+655.2%)
Mutual labels:  webpack, webpack-plugin
Copy Webpack Plugin
Copy files and directories with webpack
Stars: โœญ 2,679 (+971.6%)
Mutual labels:  webpack, webpack-plugin
Webpack Babel Multi Target Plugin
A Webpack plugin that works with Babel to allow differential loading - production deployment of ES2015 builds targeted to modern browsers, with an ES5 fallback for legacy browsers.
Stars: โœญ 150 (-40%)
Mutual labels:  webpack, webpack-plugin
Webpack.js.org
Repository for webpack documentation and more!
Stars: โœญ 2,049 (+719.6%)
Mutual labels:  webpack, webpack-plugin
Obsolete Webpack Plugin
๐ŸŒˆ A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on `Browserslist` and prompts website users to upgrade it.
Stars: โœญ 148 (-40.8%)
Mutual labels:  webpack, webpack-plugin
Html Res Webpack Plugin
plugin for generating html in webpack
Stars: โœญ 170 (-32%)
Mutual labels:  webpack, webpack-plugin
Webpack Require From
Webpack plugin that allows to configure path or URL for fetching dynamic imports
Stars: โœญ 142 (-43.2%)
Mutual labels:  webpack, webpack-plugin
Worker Plugin
๐Ÿ‘ฉโ€๐Ÿญ Adds native Web Worker bundling support to Webpack.
Stars: โœญ 1,840 (+636%)
Mutual labels:  webpack, webpack-plugin
Wxapp Webpack Plugin
๐Ÿ“ฆ ๅพฎไฟกๅฐ็จ‹ๅบ webpack ๆ’ไปถ
Stars: โœญ 185 (-26%)
Mutual labels:  webpack, webpack-plugin
Critters
๐Ÿฆ” A Webpack plugin to inline your critical CSS and lazy-load the rest.
Stars: โœญ 2,894 (+1057.6%)
Mutual labels:  webpack, webpack-plugin

npm version npm

Webpack Shell Plugin

This plugin allows you to run any shell commands before or after webpack builds. This will work for both webpack and webpack-dev-server.

Goes great with running cron jobs, reporting tools, or tests such as selenium, protractor, phantom, ect.

WARNING

This plugin is meant for running simple command line executions. It is not meant to be a task management tool.

Installation

npm install --save-dev webpack-shell-plugin

Setup

In webpack.config.js:

const WebpackShellPlugin = require('webpack-shell-plugin');

module.exports = {
  ...
  ...
  plugins: [
    new WebpackShellPlugin({onBuildStart:['echo "Webpack Start"'], onBuildEnd:['echo "Webpack End"']})
  ],
  ...
}

Example

Insert into your webpack.config.js:

const WebpackShellPlugin = require('webpack-shell-plugin');
const path = require('path');

var plugins = [];

plugins.push(new WebpackShellPlugin({
  onBuildStart: ['echo "Starting"'],
  onBuildEnd: ['python script.py && node script.js']
}));

var config = {
  entry: {
    app: path.resolve(__dirname, 'src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'), // regular webpack
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'src') // dev server
  },
  plugins: plugins,
  module: {
    loaders: [
      {test: /\.js$/, loaders: 'babel'},
      {test: /\.scss$/, loader: 'style!css!scss?'},
      {test: /\.html$/, loader: 'html-loader'}
    ]
  }
}

module.exports = config;

Once the build finishes, a child process is spawned firing both a python and node script.

API

  • onBuildStart: array of scripts to execute on the initial build. Default: [ ]
  • onBuildEnd: array of scripts to execute after files are emitted at the end of the compilation. Default: [ ]
  • onBuildExit: array of scripts to execute after webpack's process is complete. Note: this event also fires in webpack --watch when webpack has finished updating the bundle. Default: [ ]
  • dev: switch for development environments. This causes scripts to execute once. Useful for running HMR on webpack-dev-server or webpack watch mode. Default: true
  • safe: switches script execution process from spawn to exec. If running into problems with spawn, turn this setting on. Default: false
  • verbose: DEPRECATED enable for verbose output. Default: false

Developing

If opening a pull request, create an issue describing a fix or feature. Have your pull request point to the issue by writing your commits with the issue number in the message.

Make sure you lint your code by running npm run lint and you can build the library by running npm run build.

I appreciate any feed back as well, Thanks for helping!

Other Webpack Plugins

Also checkout our other webpack plugin WebpackBrowserPlugin.

Contributions

Yair Tavor

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].