javascript - 扩展 webpack 输出

Question

我正在尝试编写 Webpack 插件，它将为条目内定义的每个 block 生成别名。我的想法是生成别名，然后我可以在库属性中使用它，就像我们可以在输出中使用 [name] 或 [id] 一样。所以我新创建的插件看起来如下:

function Aliasify(options) {
  this.options = options;
}

Aliasify.prototype.apply = function(compiler) {
  var self = this;
  compiler.plugin("compilation", function(compilation) {

    compilation.plugin("optimize", function() {
      compilation.chunks.forEach(function(chunk) {
        var alias = chunk.name.replace(self.options.searchFor, self.options.replaceWith);
        chunk.alias = alias;
      });
    }

};

这会为条目中定义的每个 block 生成属性别名。

使用库属性内的[alias]会将每个 block 公开为'[alias]'，这不是我想要的。

library: ['gravity', 'gateway', '[alias]']

我希望这将生成带有公开的 master 和 slave 的 block ，这是 block 内别名属性的值。接下来是我的 config.js:

module.exports = {
  entry: {
    'master': './master.js',
    'master.min': './master.js',
    'slave': './slave.js',
    'slave.min': './slave.js'
  },
  plugins: [
    new Clean(['dist']),
    new Uglify({
        include: /\.min\.js$/i,
        minimize: true
    }),
    new Aliasify({
        searchFor: '.min',
        replaceWith: ''
    })
  ],
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
    library: ['gravity', 'gateway', '[alias]'],
    libraryTarget: 'umd',
    umdNamedDefine: true
  }
};

所以底线是:

• 我想要将文件创建为 master.js、master.min.js、slave.js 和 slave.min。 js - 使用 filename 属性中的名称就可以了
• 我希望库在 master.js、master.min.js 和 slave 中作为 master 公开> 在 slave.js 、 slave.min.js 中，但每个 block 都会公开为 [alias]

Answer 1

找到了解决此问题的方法。根据文档，webpack 将接受一系列配置。我用它来捆绑具有完全不同设置的文件。

module.exports = [
  {
    entry: {
        'index' : './index.js',
        'master': './master.js',
        'slave': './slave.js',
        'plugin-storage': './plugin-storage.js',
    },
    plugins: [
        new Clean(['dist']),
    ],
    output: {
        filename: '[name].js',
        path: __dirname + '/dist',
        library: ['gravity', 'gateway', '[name]'],
        libraryTarget: 'umd',
        umdNamedDefine: true
    }
  },
  {
    entry: {
        'index' : './index.js',
        'master': './master.js',
        'slave': './slave.js',
        'plugin-storage': './plugin-storage.js'
    },
    plugins: [
        new Uglify({
            include: /\.js$/i,
            minimize: true
        })
    ],
    output: {
        filename: '[name].min.js',
        path: __dirname + '/dist',
        library: ['gravity', 'gateway', '[name]'],
        libraryTarget: 'umd',
        umdNamedDefine: true
    }
  }
];