Webpack with html-webpack-plugin, error when installed globally

Question

I know this problem has been reported elsewhere, when webpack and html-webpack-plugin are installed with npm -g:

    module.js:341
    throw err;
    ^

Error: Cannot find module 'html-webpack-plugin'
    at Function.Module._resolveFilename (module.js:339:15)

And the answer people have found is to install one or both locally to the project. But that won't work for me. I need to get this working in our shared build system, not just in my dev environment. This means having it installed globally so that all projects have access to it via their ant/nant build scripts run by Jenkins.

My project is very simple. A couple of html pages with content generated by reactJS scripts included in the html with script tags. This should be easy, and its beginning to be a pain. Thinking of dumping webpack and looking for another simple javascript package manager.

Are there environment variables that we can use to tell webpack to look in the global node 'node_modules' directory for 'require'd plugings/packages?

Suggestions?

I can do that locally in my dev environment, but can't do that on the build server. The build server creates/destroys build environments as needed, and putting a special script in there to install html-webpack-plugin locally before kicking off the build seems like a crap solution, and I would like to avoid it. — MonkeyWrench

Ori Drori Ori Drori · Accepted Answer · 2016-03-29T17:49:01

You don't have to install webpack globally for Jenkins. Add to your package.json under scripts a command that runs the local webpack, like this:

  "scripts": {
    "start": "webpack-dev-server --inline --hot",
    "build": "webpack -p"
  },

Now Jenkins can run your build script, without having a global webpack installed:

npm run build

In this way you can maintain multiple projects with different versions of webpack, and each project can have it's own local dependencies.

The scripts prop is part of the projects package.json. The package.json contains all dependencies, and dev dependencies (build, testing, etc...) of the project. Using the package.json running NPM install on your build machine, you can install locally (part of the project dir) all dependencies. A sample of a package.json for an angular project built with webpack:

{
  "name": "whatever",
  "version": "1.2.0",
  "description": "whatever",
  "scripts": {
    "start": "webpack-dev-server --inline --hot", // runs the dev server
    "build": "webpack -p" // builds the release
  },
  "dependencies": { // the dependencies that are part of the actual release
    "angular": "1.5.0",
    "angular-animate": "1.5.0",
    "angular-messages": "1.5.0",
    "angular-ui-router": "0.2.15"
  },
  "devDependencies": { // build dependencies 
    "babel-core": "6.5.2",
    "babel-eslint": "6.0.0-beta.1",
    "babel-loader": "6.2.3",
    "babel-preset-es2015": "6.5.0",
    "babel-preset-stage-0": "6.5.0",
    "css-loader": "0.23.1",
    "file-loader": "0.8.5",
    "html-loader": "0.4.3",
    "html-webpack-plugin": "2.14.0",
    "less-loader": "2.2.2",
    "style-loader": "0.13.0",
    "url-loader": "0.5.7",
    "webpack": "1.12.14",
    "webpack-dev-server": "1.14.1"
  },
  "license": "MIT"
}

Whenever the git master is updated, Jenkins pulls the latest commit, cleans the current build directory, including all dependencies, and runs in the project folder the following commands: npm install to install all dependencies locally, as part of the project folder npm run build to build the release

Jenkins is not aware of webpack or any other build tool or dependency. The only things that are installed globally on Jenkins are nodejs and npm.

And here is the simple bash script that runs the commands:

rm -rf node_modules || true // remove node_modules (all deps)
npm install // install all deps
npm run build // run the build script

Webpack with html-webpack-plugin, error when installed globally

1 Answers