Gulp-Webpack Loaders returning loader source code?

Question

Newbie. I'm setting up gulp-webpack to run in a Gulp task, and I'm starting simple by processing a test "less" file. I npm-installed gulp-webpack, webpack, and also the webpack loaders less-loader, css-loader, and style-loader. For some reason, my output css file isn't ... instead it's a js file containing what appears to be source code for a loader itself. Do I need to require the webpack loaders within the webpack config file?

My gulpfile.js:

var gulpwebpack = require('gulp-webpack');

gulp.task('go2',function(){
return gulp.src('src/homesMenuAngular/css/*.less')
  .pipe(gulpwebpack( require('./webpack.config.js') ))
  .pipe(gulp.dest('builds/homesMenuAngular/css')); 
});

My webpack.config.js:

// no require statements

module.exports = {
  module: {
    loaders: [
      {
        test: /\.less$/,
        loader: "style!css!less"
      }
    ]
  }
};

I modified the webpack.config.js to test a vanilla css file only, processed through the css-loader. Same result, seems like gulp-webpack is outputting the combined source js for webpack's bootstrap plus source js for the loader(s) used. Still working on the issue ... — Ted Fitzpatrick, Aug 09 '16 at 19:18
Hee hee starting to think this is actually what webpack is supposed to do :-) ... maybe webpack uses js to load all other assets, including css ... still learning — Ted Fitzpatrick, Aug 09 '16 at 19:52

score 0 · Answer 1 · answered Aug 09 '16 at 23:10

So, most experienced webpackers are probably rolling their eyes, because yes, webpack does output javascript that injects all the other resources into the page. I was thinking "let's use a webpack loader to convert less to css" and "let's use gulp" to automate the whole build process but I hadn't taken a deep enough dive into how webpack works specifically that it bundles everything into 1 or more js files.

Gulp-Webpack Loaders returning loader source code?

1 Answers1