Question

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

我的目录结构：

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

这是我调用webpack的gulp任务：

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忽略目录

2 个答案: