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

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