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',
  },

我的网站包为每个条目创建[name].bundle.js和[name].map 对于前3个javascript条目是有意义的，但CSS和INDEX条目仅用于处理我的主要CSS文件和我的主html文件，后来由 ExtractTextPlugin

处理

所以在构建之后，我遇到了一些垃圾，例如css.bundle.js和css.map只包含：

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

    // removed by extract-text-webpack-plugin

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

如何告诉webpack NOT 构建一些条目的文件？（如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和文件加载器一起用于从条目中提取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插件，带有测试和诸如此类的东西？）

Answer 2

我将webpack plugin放在一起根据输出大小删除多余的文件，而不是基于他们的名字 - 这对我来说是一个更加未来的证据，因为我继续添加额外的条目指向我的webpack配置。

使用npm或yarn

进行安装

npm install webpack-extraneous-file-cleanup-plugin --save-dev
yarn add webpack-extraneous-file-cleanup-plugin --dev

在webpack.config.js文件中：

const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');

module.exports = {
  ...
  plugins: [
    new ExtraneousFileCleanupPlugin({
      extensions: ['.js']
    })
  ]
}

您可以在Webpack Extraneous File Cleanup Plugin Github Page

上查看完整的选项列表

Answer 3

编译后，您可以使用remove-files-webpack-plugin删除任何文件或文件夹。

像这样使用此插件：

plugins: [
  new RemovePlugin({
    after: {
      // expects what your output folder is `dist`.
      include: [
        './dist/css.bundle.js',
        './dist/css.map'
      ]
    }
  })
]

注意：我是此插件的创建者。

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

3 个答案: