Webpack Loader不能在Jenkins CI Build上工作 [英] Webpack Loader not Working on Jenkins CI Build

问题描述

我正在尝试将Weback整合到我当前的项目中，并且遇到了一个自定义加载器的问题，我建立了一个围绕每个模块的文件内容创建一个连续横幅和页脚，并注入 __ filename 值。一切都很好，用grunt来做本地制作

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


grunt server
//或
grunt build --env = production // uglify / dedupe的生产构建


我们在Jenkins上的分段构建使用 grunt staging-deploy --branch = $ branch - -env = production

我们的生产构建使用Docker容器和一个运行 grunt build的deploy.sh脚本， -env =生产。由于某种原因，此构建无法运行加载程序，尽管本地将使用 grunt build --env = production 成功运行加载程序并构建资源。

我将加载器硬编码到repo中，并通过 make-webpack.config.js 中的路径要求它，以便调试，如果这是Jenkins的一些安装问题，但这没有帮助。

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

我知道这很可能是一个难题，无需访问我们的Jenkins部署环境即可回答任何信息提供帮助调试将非常有用。

我在Weback repo中创建了一个问题这里基本上陈述与上述相同的信息。

更新
我采取了这个建议将变量注入webpack 并添加了

  resolveLoader：{
 modulesDirectories：['loaders'，'node_modules']，
 extensions：[''，'.loader.js '，'.js'] 
} 
  

到我的webpack.config并把我的 loaders 目录在我的项目的根目录。不幸的是，结果仍然是一样的，装载器不能在Jenkins上运行。

解决方案

这是解决方案发现这个问题：

我们的CI构建是通过NPM安装我们的项目从Git作为一个 node_module ，而不是使用 git clone 。因此，在CI构建的根目录下有一个 node_modules 目录，并且该目录正在构建。

  node_modules /< project npm包名称> / {node_modules，grunt / webpack / ... configs} 
  

因此，似乎加载程序正在查找错误的 node_modules 目录，但是奇怪的是，正在使用我正在使用的其他加载程序，例如 babel 和 handlebars 。

当我在加载程序配置中直接使用加载程序路径

  var injectFilenamePath = path.join（process.cwd（），'grunt / webpack / inject-filename-loader'）; 
 console.log（'LOADER PATH =>'，injectFilenamePath）; 
 
 var loaders = [
 {
 test：/\s/s/s/b 
 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'} 
]; 
  

控制台输出是

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

克隆我们的回购，而不是 npm我路径是

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

这不知何故预期行为，但希望如果它们出现，它会将其他人从类似的问题中拯救出来。

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.

解决方案

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.

这篇关于Webpack Loader不能在Jenkins CI Build上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！