Webpack Loader not Working on Jenkins CI Build

问题:

I'm trying to integrate Weback into my current project and am having problems with a custom loader I built to create a concat banner and footer around each module's file contents, and to inject the __filenamevalue. Everything works great doing local builds with grunt

https://github.com/optimizely/marketing-website/tree/dfoxpowell/jordan-webpack-try/grunt/webpack

grunt server //or grunt build --env=production //production build for uglify/dedupe

Our staging build on Jenkins successfully runs the loader using grunt staging-deploy --branch=$branch --env=production

Our production build uses a Docker container and a deploy.sh script which runs grunt build --env=production. This build for some reason fails to run the loader although grunt build --env=production locally will successfully run the loader and build the assets.

I resorted to hardcoding the loader into the repo and requiring it by path in the make-webpack.config.js in order to debug if this was some sort of installation issue on Jenkins but this didn't help.

https://github.com/optimizely/marketing-website/blob/dfoxpowell/jordan-webpack-try/loaders/inject-filename-loader.js

I know this is most likely a difficult question to answer without access to our Jenkins deploy environment but any info you could offer for help debugging would be extremely helpful.

I created an issue in the Weback repo here that basically states the same info as above.

Update I took this suggestion Injecting variables into webpack and added

resolveLoader: {
  modulesDirectories: ['loaders', 'node_modules'],
  extensions: ['', '.loader.js', '.js']
}

to my webpack.config and put my loaders directory in the root of my project. Unfortunately, the result is still the same and the loader doesn't run in prod on Jenkins.

回答1:

Here is the solution I found to this issue:

Our CI build was installing our project from Git as a node_module through NPM rather than using git clone. Therefore, there was a node_modules directory at the root of the CI build, and the project was being built inside of this directory.

node_modules/<project npm package name>/{node_modules,grunt/webpack/...configs}

Therefore, it seems the loader was being looked for in the wrong node_modules directory, but it is strange that other loaders that I was using such as babel and handlebars were being sourced correctly.

When I used the loader path directly in the loader config

var injectFilenamePath = path.join(process.cwd(), 'grunt/webpack/inject-filename-loader');
console.log('LOADER PATH => ', injectFilenamePath);

var loaders = [
    {
      test: /\.js$/,
      exclude: [
        /node_modules/,
        /bower_components/,
        /libraries/
      ],
      loader: injectFilenamePath + '?' + opts.injectFileNameParams
    },
    { test: /\.hbs$/, loader: 'handlebars-loader' },
    {test: /\.js?$/, exclude: ['bower_components', 'node_modules'], loader: 'babel-loader'}
  ];

the console output was

LOADER PATH =>  /opt/tmp/node_modules/marketing-website/grunt/webpack/inject-filename-loader

and after cloning our repo rather than npm i the path was

LOADER PATH =>  /opt/tmp/marketing-website/grunt/webpack/inject-filename-loader

Not sure if this somehow expected behavior but hopefully it saves others from similar issues if they arise.