1337programming/webpack-shell-plugin

Run shell commands either before or after webpack builds

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

webpack-shell-plugin's Issues

Documentation Incorrect

You specify onBuildExit as an option in your documentation, but if you look at the source code it is clearly onExit.

Fails to launch .cmd files

As of version 0.4.5 (0.4.4 works correctly), on windows, batch/command files don't work unless you include the .bat/.cmd extension. This causes problems with running scripts from npm packages in a way that is agnostic of Windows/Linux. For example, if I have semver installed, there will be both a ./node_modules/.bin/semver (for Linux) and a ./node_modules/.bin/semver.cmd (for Windows). At my actual command line I should just be able to run semver (without an extension) on either Windows or Linux. As of 0.4.5, I have to launch it as semver.cmd when on Windows which means I have to switch my webpack code based on platform (which is less than ideal).

Just speculating, but could it have something to do with the switch to child_process.spawn from child_process.exec?

onBuildExit fires before webpack is actually done

I have a script set to run when webpack is all done (onBuildExit) but it seems to fire before webpack is actually done (I have also tried onBuildEnd)

My script:

  webpackConfig.plugins.push(new WebpackShellPlugin({
    onBuildStart: ['./node_modules/.bin/bump prerelease'], // need to bump version first before files copied etc
    onBuildExit: ['echo "test"']
  }));

Results:

You can see in the screenshot below, the "test" message is definitely emitted before webpack is done

onBuildError

Analogous to onBuildStart and onBuildEnd, take in a script to execute when there is a webpack compilation error.

0.4.4 → 0.4.5 breaks pipe operator `|`

Hi, our builds containing the following command just stopped working after npm automatically pulled in version 0.4.9 today.

		new WebpackShellPlugin({
			onBuildStart: [
				'git describe --tags HEAD >.app-version || date --rfc-3339=seconds >.app-version'
			]
		}),

The last good version that runs it is 0.4.4. In 0.4.5, we get this error, but it does not stop the build:

error: unknown option `rfc-3339=seconds'
usage: git describe [options] <commit-ish>*
  [...] git usage info here [...]
Error:  129 undefined
  [...] webpack result, all green [...]

In 0.4.6, on the other hand, the error is actually thrown and webpack bails out (with --bail):

.../node_modules/webpack-shell-plugin/lib/index.js:156
    throw error;
    ^
129

(Not sure what the actual command being run is, but I would wager it's just git with appended arguments but with the pipeline character skipped.)

This behaviour continues up to the current newest version, 0.4.9.
It seems that some parsing behaviour has dramatically changed between 0.4.4 and 0.4.5 and broken using proper shell constructs.

Unable to use curly braces and quotes

I'm using this plugin to generate a JSON file with my app version like below:

new WebpackShellPlugin({onBuildEnd:['cat package.json | grep version | sed -e \'s/[",]//\'g | sed -e \'s/.*: \(.*\)/{\"version\": \"\1\"}/\' > build/app-info.json']})

This shell command works perfectly when run in the terminal but when generated via WebPack, the JSON file is missing the curly braces and the double quotes. Is there any way to get around this?

Thank you!

stderr error php artisan view:clear: /bin/sh: php: not found

When I try to run npm run dev

Executing pre-build scripts
stderr error php artisan view:clear: /bin/sh: php: not found

file webpack.mix.js (laravel project)

Run multiple commands

I am trying to run multiple commands and get

internal/child_process.js:289
  var err = this._handle.spawn(options);
                         ^

TypeError: Bad argument

I am trying to run in the onBuildEnd with a command that does this
'cp -R src/main/webapp/build/ target/lcrf-web-CUBS-SNAPSHOT/build/ && echo "copy finished" '
Is there a way that I can do this with this plugin?

Question [webpack-cli] TypeError: compiler.plugin is not a function

When I add this plugin to my webpack.config.js for my ExpressJS app I get the following error stack.

[webpack-cli] TypeError: compiler.plugin is not a function
    at WebpackShellPlugin.apply (F:\Backend\node_modules\webpack-shell-plugin\lib\index.js:236:16)
    at createCompiler (F:\Backend\node_modules\webpack\lib\webpack.js:69:12)
    at create (F:\Backend\node_modules\webpack\lib\webpack.js:113:15)
    at webpack (F:\Backend\node_modules\webpack\lib\webpack.js:121:46)
    at f (F:\Backend\node_modules\webpack\lib\index.js:37:15)
    at WebpackCLI.createCompiler (F:\Backend\node_modules\webpack-cli\lib\webpack-cli.js:1165:24)
    at async WebpackCLI.bundleCommand (F:\Backend\node_modules\webpack-cli\lib\webpack-cli.js:1292:20)
    at async Command.<anonymous> (F:\Backend\node_modules\webpack-cli\lib\webpack-cli.js:322:21)
    at async Promise.all (index 1)
    at async Command.<anonymous> (F:\Backend\node_modules\webpack-cli\lib\webpack-cli.js:708:13)

Any idea why this is happening? When I remove the shell plugin code the error is gone too.

My webpack.config.js:

const { join, resolve } = require("path");
const ShellPlugin = require("webpack-shell-plugin");
const nodeExternals = require("webpack-node-externals");

module.exports = {
	entry: join(__dirname, "src", "index.ts"),
	target: "node",
	mode: process.env.NODE_ENV,
	output: {
		path: resolve(__dirname, "dist"),
		filename: "bundle.js",
	},
	watch: process.env.NODE_ENV === "development",
	resolve: {
		extensions: [".ts", ".js"],
	},
	externals: [nodeExternals()],
	module: {
		rules: [
			{
				test: /\.ts$/,
				exclude: /node_modules/,
				use: {
					loader: "ts-loader",
				},
			},
		],
	},
	plugins: [
		new ShellPlugin({
			onBuildEnd: ["npm run dev:start"],
		}),
	],
};

docs bug - does it work with webpack --watch

In the docs it says:

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

maybe it could specify it works with webpack --watch too?

Retain color within child process

First of all, thanks for the plugin. It's very helpful.

Currently, child processes can't output colored text which makes me :(. I did a little googling and it looks like most people are recommending using spawn instead of exec. I haven't dug into it beyond that.

Publish typings for TypeScript

Would love to see some made for this library. Either bundled with, or published to the definitely typed repository! 😄

Disable Option

Is there a way to disable a command? I tried to look in the src code and I think this was not handle. I was thinking of this for example

onBuildExit: [
    {
        run: 'php echo test',
        disable: (ENV != test)
    },
    {
        ...
    }
]

not only for onBuildExit but also on other builds.

Exit codes ignored

Hi,

I am running a process that I would like to fail the npm build process if my spawned process fails (i.e., non-zero exit code). There doesn't appear to be a way to do that. Have you considered this? Would you be open to a PR?

Geoff

Console output does not include color

Hey there,

First of all, thanks for the plugin, it does exactly what I need it to do.

An issue I found (surely not a show stopper) but when executing the shell command, all console output is white, not using the color output defined in the script shell.

Error thrown, command runs fine

I have no idea how to debug this.
The command fired (sh config/cordova.sh ./mobile ./build/user/index.html ) runs fine if fired in the shell after the build.
Furthermore: sometime this happens, sometime it does not.

Error: Cannot read property 'replace' of undefined

/Users/damz/Desktop/repmemo/node_modules/webpack-shell-plugin/lib/index.js:168
        throw error;
        ^
1
error Command failed with exit code 1.

sync option

Currently using an array/etc executes them all at once,

it would be nice to have some way to have it wait for the first before continuing the next one.

when option `dev` set false, it don't take effect

version 0.3.5
in index.js

 if (!options.dev) {
    options.dev = defaultOptions.dev;
  }

when dev set false, default value (true) assign to dev again

beforeBuildStart

Hello,

I have an unusual setup – at the moment the only available way to build part of my app is to output it into a file via a shell command. After that, I have to read that output from disk and use it in my webpack build.

Would it be possible to execute a command before my build starts? How about adding a beforeBuildStart config option for that?

[webpack-cli] TypeError: compiler.plugin is not a function

[webpack-cli] TypeError: compiler.plugin is not a function
at WebpackShellPlugin.apply (E:\xampp\htdocs\transTest\node_modules\webpack-shell-plugin\lib\index.js:236:16)
at createCompiler (E:\xampp\htdocs\transTest\node_modules\webpack\lib\webpack.js:73:12)
at create (E:\xampp\htdocs\transTest\node_modules\webpack\lib\webpack.js:134:16)
at webpack (E:\xampp\htdocs\transTest\node_modules\webpack\lib\webpack.js:142:47)
at WebpackCLI.f [as webpack] (E:\xampp\htdocs\transTest\node_modules\webpack\lib\index.js:58:16)
at WebpackCLI.createCompiler (E:\xampp\htdocs\transTest\node_modules\webpack-cli\lib\webpack-cli.js:2191:23)
at async WebpackCLI.runWebpack (E:\xampp\htdocs\transTest\node_modules\webpack-cli\lib\webpack-cli.js:2321:16)
at async Command. (E:\xampp\htdocs\transTest\node_modules\webpack-cli\lib\webpack-cli.js:1058:13)
at async Promise.all (index 1)
at async Command. (E:\xampp\htdocs\transTest\node_modules\webpack-cli\lib\webpack-cli.js:1672:7)

Failing after lb-ng in onBuildStart

I'm using Loopback lb-ng for generating Angular 1.x services using webpack. So everytime I build the client, I need to execute lb-ng.
onBuildStart: ['lb-ng ../server/server.js lb-services.js']
After the lb-ng command is executed without any issues, return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); Error: ENOENT: no such file or directory error is occured.

Does not wait for process to finish

We have a process that writes a value to a file which is then required by the actual build process like this:

git describe --tags HEAD >.app-version || date --rfc-3339=seconds >.app-version

Then, the "version file" generated as above is require()d in the application source.

It turns out this plugin does not wait for the command to finish before passing control back to webpack, because today we got an error during the JS build:

ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ../.app-version in /builds/xxx/src

Here is a more minimal demonstration:

                new WebpackShellPlugin({
                        onBuildStart: [
                                'sleep 60; touch .myfile'
                        ],
                        safe: true
                })

Then, if you run your build as usual, it will actually finish before the file has been created. This prevents you from require()ing files generated as such in your webpack project.

I see 2 solutions:

• Use the callback interface provided by Webpack plugin API, or
• Use execSync instead of exec

Current project status

Hi, what is the current status of this project? Is it still actively maintained or are you looking for maintainers?

Tapable.plugin is deprecated

WebpackShellPlugin is causing a warning with Webpack 4. When I run node --trace-deprecation ./node_modules/.bin/webpackI get this:

(node:83992) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    at WebpackShellPlugin.apply (/projectDir/node_modules/webpack-shell-plugin/lib/index.js:236:16)

I would have submitted a PR, but looks like I can't build the project without errors and it doesn't pass linting. In addition, there hasn't been much activity in a year so in case someone else is encountering the same issue, you can fix it locally.

Just replace all compiler.plugin('hookName', ...) calls with compiler.hook.[hookName].tap or compiler.hook.[hookName].tapAsync if it's asynchronous and gets a callback as an argument.

suggestion on running a generic shell command

To run a generic shell command, do this:

const cp = require('child_process');

const k = cp.spawn('bash');
k.stdin.write('\n');
k.stdin.write('any command you would ever want in any format');
k.stdin.end();

the above will change your life when writing library code where the user gives you an arbitrary command to run.

doesn't respect webpack configuration if more than one is exported

If you export more than one configuration, onBuildEnd is fired after the first configuration is processed even if that configuration uses no plugins.
Also the last onBuildEnd definition overwrites all previously defined.

node 8.7.0
webpack 3.8.1
webpack-shell-plugin 0.5.0

module.exports = [{
    entry: {
        client: ['./client.ts']
    },
    // will never fire..
    plugins: [new WebpackShellPlugin({ onBuildEnd: ['echo "fin client"'] })],
    ...
}, {
    entry: {
        server: ['./server.ts']
    },
    // will fire when client is finished
    plugins: [new WebpackShellPlugin({ onBuildEnd: ['echo "fin server"'] })],
    ...
}];

Reason for error handling change introduced in v0.4.6?

I'm trying to understand the reasoning behind 170c250 which was introduced in v0.4.6.

Prior to this change, the plugin would pass an error on to Webpack, but as a result of this change any error from a shell command now kills the Webpack process. Is this the desired/expected behavior or a bug?

This could be related to #38

propagate stdout stderr for commands that not exit

hi!, i have a command that doesn't exit (it is a watcher of files) so this plugin never tell me the output of the command. i have easily solved that by doing:

var proc = exec(script, puts);
proc.stdout.pipe(process.stdout);
proc.stderr.pipe(process.stdout);

demo:

would you be insterested in a PR?

It not working after update on @babel/node": "^7.0.0-beta.42

Doesn't work with webpack --watch

Doesn't seem work with webpack --watch. Build runs, but my shell commands aren't. Has anyone tried this with --watch?

onBuildEnd is using webpack 'emit' but should use 'after-emit'

The webpack-shell-plugin docs indicate onBuildEnd should be "after files are emitted" ...

onBuildEnd: array of scripts to execute after files are emitted at the end of the compilation. Default: [ ]

... but it uses 'emit' rather than 'after-emit' and we've observed problems due to this where the commands run before the files are actually available since the emit routines are async.

compiler.plugin('emit', function (compilation, callback) ...

webpack docs https://webpack.github.io/docs/plugins.html indicate 'after-emit' is the desired event:

emit(c: Compilation) async
The Compiler begins with emitting the generated assets. Here plugins have the last chance to add assets to the c.assets array.

after-emit(c: Compilation) async
The Compiler has emitted all assets.

Platform specific scritps

I realize that this has been an open point of discussion in regards to npm. Do you have any recommendations for how one should go about having a script run only on Windows or Mac?

Stop node process(es) on certain port and start again

I'm running webpack in watch mode and want to start the node script after the build automatically. To avoid the EADDRINUSE, Address already in use error, I wan't to kill all node processes running on certain port (3001) before I start my script. It works perfect the first time I run it, but after changing anything in code and webPack does a new build, I get an error:

Executing pre-build scripts
 ......./node_modules/webpack-shell-plugin/lib/index.js:168
        throw error;
        ^

Error: Command failed: node ./bin/server.bundle.js
.......
    at ChildProcess.exithandler (child_process.js:211:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:192:7)
    at maybeClose (internal/child_process.js:890:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:189:7)
    at Pipe._handle.close [as _onclose] (net.js:501:12)

My plugin config looks like this:

plugins.push(new WebpackShellPlugin({
        // kill node process on port 3001 
        onBuildStart: ['lsof -ti:3001 -c node -a | xargs kill'],
        // kill node process on port 3001 and start server
        onBuildEnd: ['lsof -ti:3001 -c node -a | xargs kill', 'node ./bin/server.bundle.js'],  
        dev: false,
        safe: true
    }));

I'm not really sure if this is a problem with the plugin, but running the same command in shell works like a charm.

Edit: same with 'lsof -ti:3001 -c node -a | xargs kill && node ./bin/server.bundle.js' command

watch pre rebuild hook

Hey! This plugin is great! Thank you for your work.

Is there any way to hook in to any pre rebuild events? I see exit will fire on --watch after the rebuild has been emitted, is there something similar for right before it starts rebuilding? If not, any plans for something like this in the future?

Again, thank you!!

Shell script not executing correctly

When executing a command with output redirection or piping, the precedence isn't respected. (I think I can give a better explanation with an example).

When running echo "Hello" > ./world.txt with webpack-shell-plugin, instead of having a file named world.txt with the contents Hello, I get the string "Hello" > ./world.txt in the console

I have created a repo with the repro of the issue I'm seeing.

puts is not defined

puts is not defined
at WebpackShellPlugin.handleScript (C:\Users\加菲猫\workspace\react-boilerplate\node_modules\webpack-shell-plugin\lib\index.js:196:49)

I use win32 System to run the plug-in,but it has report an error like this ~~

Commands not found error after on hooks(onBuildStart and onBuildEnd)

This is how my Webpack config files looks like.

`const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const NodemonPlugin = require('nodemon-webpack-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');

const ENV = process.env.NODE_ENV.trim();

const isDev = ENV !== 'production';
const isProd = ENV === 'production';

function setDevTool() {
if (isDev) {
return 'inline-source-map';
} else if (isProd) {
return 'source-map';
} else {
return 'eval-source-map';
}
}

const browserConfig = {
mode: ENV,
entry: './src/client/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/'
},
devtool: setDevTool(),
module: {
rules: [
{
test: /.(js)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.DefinePlugin({
isBrowser: "true"
})
]
}

const serverConfig = {
mode: ENV,
entry: './src/server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: __dirname,
filename: 'server.js',
publicPath: '/'
},
devtool: setDevTool(),
module: {
rules: [
{
test: /.(js)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.DefinePlugin({
isBrowser: "false"
})
]
}

if (isDev) {
serverConfig.plugins.push(
new NodemonPlugin()
);
}

if (isProd) {
browserConfig.plugins.push(
new UglifyJSPlugin({
sourceMap: true
})
);
serverConfig.plugins.push(
new UglifyJSPlugin({
sourceMap: true
}),
new WebpackShellPlugin({
onBuildStart: ['echo "Production Build Start."'],
onBuildEnd: ['node server.js']
})
);
}

module.exports = [browserConfig, serverConfig];
`

When I run 'NODE_ENV=production webpack -w', it returns error after webpack build.
Error: Command failed: node server.js

Please give me an idea why this error occurs if anybody knows why.
Thank you.

stdout error

On Windows with most recent package version, I am getting a buffer stdout error:

[SERVICES] Error: stdout maxBuffer exceeded
[SERVICES]     at Socket.onChildStdout (child_process.js:328:14)
[SERVICES]     at emitOne (events.js:121:20)
[SERVICES]     at Socket.emit (events.js:211:7)
[SERVICES]     at addChunk (_stream_readable.js:263:12)
[SERVICES]     at readableAddChunk (_stream_readable.js:246:13)
[SERVICES]     at Socket.Readable.push (_stream_readable.js:208:10)
[SERVICES]     at Pipe.onread (net.js:597:20)

Any ideas?

Doesn't appear to work on Watch

This appears to work on webpack start, but I'm having issues getting it to work on the actual build triggered by watch.

Using:

• webpack-shell-plugin 0.4.2
• webpack 1.13.1

Any thoughts?

Webpack process is killed whenever some of the integrated scripts finishes with errors, under Windows

Under windows, scripts which finish with code different than 0 return errors to this callback:

https://github.com/1337programming/webpack-shell-plugin/blob/master/src/webpack-shell-plugin.js#L21

I think this is normal behaviour. From the node docs :

If a callback function is provided, it is called with the arguments (error, stdout, stderr). On success, error will be null. On error, error will be an instance of Error. The error.code property will be the exit code of the child process while error.signal will be set to the signal that terminated the process. Any exit code other than 0 is considered to be an error.

This callback throws all errors it gets.

As a result, the Webpack process is killed whenever some of the integrated scripts finishes with errors.

Error: spawn ENOENT

I'm not sure when this started, but after recently updating webpack-shell-plugin to 0.4.6, my config seems to have stopped working. I have the following in my Webpack 2.1.0-beta.27 config:

    plugins: [
        new WebpackShellPlugin({
            onBuildEnd: ['tsc --d --declarationDir dist/typings'],
            dev: false
        })
    ]

Which, when I try to run Webpack gives me:

Executing post-build scripts
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: spawn tsc ENOENT
    at exports._errnoException (util.js:1007:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:182:32)
    at onErrorNT (internal/child_process.js:348:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

I'm not 100% sure what versions are affected, but I rolled back to version 0.4.3 of this plugin, and that seemed to do the trick.

PHP artisan command with arguments

Hi , your package is help full i've a question.

How to run command like this?

php artisan vendor:publish --provider="Nero\Ecomm\Providers\EcommServiceProvider" --tag="nero_public"

Simple command is working like this.

php artisan vendor:publish

Question does this work with webpack watch?

Question for you - does this work with webpack --watch or only work with webpack? My guess is that it's not designed to work with webpack --watch.

Tapable.plugin is deprecated. Use new API on `.hooks` instead

Something that this plugin uses is deprecated, according to this issue:

webpack/webpack#6568 (comment)

Open an issue on the plugin's (or loader's) repository and include the stacktrace so its author could identify what is causing the warning.

Please look into it! Thanks.