webpack - 删除或不为 webpack 中的每个条目创建一个文件

Question

嗨，我有一个带有这些入口点的 webpack 配置:

  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor':    './src/vendor.ts',
    'app':       './src/app.ts',
    'css': './src/css/main.unique.scss',
    'index': './src/index.unique.html',
  },

我的 webpack 正在创建一个 [name].bundle.js和一个 [name].map对于每个条目。
这对前 3 个 javascript 条目有意义，但 CSS 和 INDEX 条目仅用于处理我的主 CSS 文件和我的主 html 文件，这些文件稍后由 处理。提取文本插件

所以在构建之后，我被一些垃圾困住了，比如 css.bundle.js和 css.map其中仅包含:

webpackJsonp([1],[
/* 0 */
/***/ function(module, exports) {

    // removed by extract-text-webpack-plugin

/***/ }
]);
//# sourceMappingURL=css.map

如何告诉 webpack 不为​​某些条目构建文件？ (如 css/index)
或者在编译后删除那些无用的文件？

提前致谢

Answer 1

我编写了一个 SuppressEntryChunksPlugin(下面的代码)，它会跳过这些无用包的输出，如果你告诉它哪些包将是无用的。在你的 webpack.config.js 中像这样使用它:

var SuppressEntryChunksPlugin = require('./SuppressEntryChunksPlugin');
...
  entry: {
    'app': './src/app.ts',
    'css': './src/css/main.unique.scss',
    'index': './src/index.unique.html',
  },
  plugins: [
    // don't output the css.js and index.js bundles
    new SuppressEntryChunksPlugin(['css', 'index'])
  ]

免责声明:它与 extract-loader 一起对我有用和 file-loader 从条目中提取 css/html 并将文件写入输出。我还没有用 ExtractTextPlugin 测试过它。 (它确实适用于 webpack-dev-server。如果您正在使用它们，它似乎可以成功抑制外部源映射。我已经将它与 Webpack 1.13 和 2.2.1 一起使用。)

// SuppressEntryChunksPlugin.js

function SuppressEntryChunksPlugin(options) {
  if (typeof options === 'string') {
    this.options = {skip: [options]};
  } else if (Array.isArray(options)) {
    this.options = {skip: options};
  } else {
    throw new Error("SuppressEntryChunksPlugin requires an array of entry names to strip");
  }
}

SuppressEntryChunksPlugin.prototype.apply = function(compiler) {
  var options = this.options;

  // just before webpack is about to emit the chunks,
  // strip out primary file assets (but not additional assets)
  // for entry chunks we've been asked to suppress
  compiler.plugin('emit', function(compilation, callback) {
    compilation.chunks.forEach(function(chunk) {
      if (options.skip.indexOf(chunk.name) >= 0) {
        chunk.files.forEach(function(file) {
          // delete only js files.
          if (file.match(/.*\.js$/)) {
            delete compilation.assets[file];
          }
        });
      }
    });
    callback();
  });
};

module.exports = SuppressEntryChunksPlugin;

另外，我是“webpack 专家”的对立面，所以几乎可以肯定有更好的方法来做到这一点。 (也许有人想把它变成一个真正的、发布的 webpack 插件，包括测试等等？)