Question

我正在尝试编写Webpack插件，它将为条目中定义的每个块生成别名。我的想法是生成别名，然后我可以在库属性中使用，就像我们可以在输出中使用[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;
      });
    }

};

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

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

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

我希望这会产生暴露的master和slave的块，这是块内的别名属性的值。我的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 - 使用文件名prop
我希望库在master，master.js和master.min.js slave slave.js内展示为slave.min.js，但每个块都会得到公开为[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
    }
  }
];

扩展webpack输出

1 个答案: