让 webpack 忽略一个目录

Question

我正在制作一个 chrome 可注入内容脚本的扩展程序。我不希望内容脚本被 webpack 处理。

我的目录结构：

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

这是我的 gulp 调用 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`))
});

我想保留构建目录中的目录结构，而不是让 content/ 中的文件被解析，即。使用 file-loader

但是它们刚刚被解析，我的 pre 内容脚本规则被忽略了。

Answer 1

Webpack 只会处理您正在编译的脚本所需的文件。这样做是不可能的，因为排除具有依赖关系的目录会破坏您的项目。

Answer 2

我做了一个单独的 gulp 任务来复制这些类型的脚本而不进行任何处理，并从调用 webpack

的 gulp 任务中排除了相同的目录

让 webpack 忽略一个目录

Make webpack ignore a directory

google-chrome-extension

webpack

webpack-2

webpack-file-loader

webpack-plugin