删除或不为 webpack 中的每个条目创建一个文件 [英] Delete or not create a file for each entry in webpack

问题描述

我有一个带有以下入口点的 webpack 配置:

Hi I have a webpack config with these entry points:

  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 文件，稍后由 ExtractTextPlugin

My webpack is creating a [name].bundle.js and a [name].map for each entry.
It makes sense for the first 3 javascript entries but the CSS and the INDEX entries are just for processing my main CSS file and my main html file which get treated later by the ExtractTextPlugin

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

So after a build I'm stuck with some garbage like css.bundle.js and css.map which only contains:

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

    // removed by extract-text-webpack-plugin

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

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

How can I tell webpack to NOT build files for some entries? (like css/index)
Or alternatively to delete those useless files after the compile?

提前致谢

推荐答案

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

I hacked together a SuppressEntryChunksPlugin (code below) that skips output of these useless bundles, if you tell it which bundles will be useless. Use it in your webpack.config.js like this:

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 一起使用.)>

Disclaimers: It works for me together with extract-loader and file-loader to extract the css/html from the entries and write the files into the output. I haven't tested it with ExtractTextPlugin. (It does work with webpack-dev-server. And it seems to successfully suppress external sourcemaps if you're using them. I've used it with both Webpack 1.13 and 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 插件，包括测试等等?)

Also, I'm whatever the opposite of "webpack expert" is, so there's almost certainly a better way to do this. (Perhaps someone would like to turn this into a real, published webpack plugin, with tests and whatnot?)

这篇关于删除或不为 webpack 中的每个条目创建一个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！