Make webpack ignore a directory

Question

I'm making a chrome extension that injects content scripts. I don't want Content scripts to be processed by webpack.

My directory structure:

/extension
|-manifest.json
|--scripts
   |- background.js
   |- content
      |-- script1.js
      |-- script2.js
      |-- ...

Here's my gulp task that calls webpack:

gulp.task('js', (cb) => {

  return gulp.src(['source/scripts/**/*.js'])
    .pipe(plumber({
      errorHandler: function(errors) {

      }
    }))
    .pipe(named())
    .pipe(gulpWebpack({
      watch: args.watch,
      module: {
        rules: [
          {
            enforce: "pre",
            test: /\.json$/,
            loader: "json-loader"
          },
          {
            enforce: "pre",
            test: /\.(gif|jpe?g|png)$/,
            loader: "file-loader?name=img/[name].[ext]",
          },
          {
            enforce: "pre",
            test: /content\//,
            loader: "file-loader?name=content/[name].[ext]",
          },
          {
            test: /\.js$/,
            loader: "babel-loader",
            exclude: [
              /content/
            ]
          }
        ],
      },
    }, null, (err, stats) => {
      log(`Finished '${colors.cyan('js')}'`, stats.toString({
        chunks: false,
        colors: true,
        cached: false,
        children: false
      }));
    }))
    .pipe(gulp.dest(`/scripts`))
});

I want to keep the directory structure in the build directory and not get the files inside content/ to be parsed, ie. to use the file-loader

But they're just getting parsed and my pre rule for content scripts is getting ignored.

Answer 1

Webpack will only process the files which are required by the script which you are compiling. It is not possible to do so as excluding directories with dependencies would break your project.

Answer 2

I've made a separate gulp task to copy those sort of scripts without any processing and excluded that same directory from the gulp task that calls webpack