扩展webpack输出

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

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创建的文件 - 这是确定使用文件名的名字支撑
我想让图书馆在master.js,master.min.js和slave之间曝光为masterslave.js，slave.min.js，但是每个块都暴露为[alias]

来源

2017-08-28 Ivan Pandžić

找到了解决方法。根据文档，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 
    } 
    } 
];

来源

2017-09-12 08:03:32

扩展webpack输出

回答

相关问题