为 web pack设计的合并( MIT )

・10 分钟阅读

  • 源代码名称: webpack-merge
  • 源代码网址: https://www.github.com/survivejs/webpack-merge
  • webpack-merge的文档
  • webpack-merge的源代码下载
  • Git URL:
    git://www.github.com/survivejs/webpack-merge.git
  • Git Clone代码到本地:
    git clone https://www.github.com/survivejs/webpack-merge
  • Subversion代码到本地:
    $ svn co --depth empty https://www.github.com/survivejs/webpack-merge
                              Checked out revision 1.
                              $ cd repo
                              $ svn up trunk
              
  • build statusbitHound Scorecodecov

    webpack-merge-为web pack设计的合并

    webpack-merge提供了一个merge函数,它连接数组,合并对象,创建新对象,如果遇到函数,它将执行它们,通过算法运行结果,然后再将返回的值包装在函数中。

    这种行为在配置webpack时特别有用。无论什么时候需要合并配置对象,webpack-merge都可以派上用场。

    还有一个web pack特定的合并变体称为merge.smart,能够考虑webpack细节(它可以扁平化加载器定义)。

    标准合并

    merge(...configuration | [...configuration])

    merge是API的核心,也是最重要的思想,除非你想进一步定制,否则这就是你所需要的。

    // Default APIvar output =merge(object1, object2, object3, ...);// You can pass an array of objects directly.// This works with all available functions.var output =merge([object1, object2, object3]);

    merge({ customizeArray, customizeObject })(...configuration | [...configuration])

    可以通过curry定制的定制API定制每个字段的merge行为。

    // Customizing array/object behaviorvar output =merge(
     {
     customizeArray(a, b, key) {
     if (key ==='extensions') {
     return_.uniq([...a, ...b]);
     }
     // Fall back to default mergingreturnundefined;
     },
     customizeObject(a, b, key) {
     if (key ==='module') {
     // Custom mergingreturn_.merge({}, a, b);
     }
     // Fall back to default mergingreturnundefined;
     }
     }
    )(object1, object2, object3, ...);

    例如,如果前面的代码仅使用object1和带有object1object2调用,则为:

    
    {
    
    
     foo1: ['object1'],
    
    
     foo2: ['object1'],
    
    
     bar1: { object1: {} },
    
    
     bar2: { object1: {} },
    
    
    }
    
    
    
    

    object2

    
    {
    
    
     foo1: ['object2'],
    
    
     foo2: ['object2'],
    
    
     bar1: { object2: {} },
    
    
     bar2: { object2: {} },
    
    
    }
    
    
    
    

    然后,为Array类型的每个属性调用customizeArray,即:

    
    customizeArray(['object1'], ['object2'], 'foo1');
    
    
    customizeArray(['object1'], ['object2'], 'foo2');
    
    
    
    

    对于Object类型的每个属性,将调用customizeObject,即:

    
    customizeObject({ object1: {} }, { object2: {} }, bar1);
    
    
    customizeObject({ object1: {} }, { object2: {} }, bar2);
    
    
    
    

    merge.unique(<field>, <fields>, field => field)

    constoutput=merge({
     customizeArray:merge.unique(
     'plugins',
     ['HotModuleReplacementPlugin'],
     plugin=>plugin.constructor&&plugin.constructor.name )
    })({
     plugins: [
     newwebpack.HotModuleReplacementPlugin()
     ]
    }, {
     plugins: [
     newwebpack.HotModuleReplacementPlugin()
     ]
    });// Output contains only single HotModuleReplacementPlugin now.

    合并策略

    merge.strategy({ <field>: '<prepend|append|replace>''})(...configuration | [...configuration])

    假设你希望配置每个字段的合并行为,则有策略变量:

    // Merging with a specific merge strategyvar output =merge.strategy(
     {
     entry:'prepend', // or 'replace', defaults to 'append''module.loaders':'prepend' }
    )(object1, object2, object3, ...);

    merge.smartStrategy({ <key>: '<prepend|append|replace>''})(...configuration | [...configuration])

    同样的想法也适用于智能合并(下面更详细地描述。

    var output =merge.smartStrategy(
     {
     entry:'prepend', // or 'replace''module.loaders':'prepend' }
    )(object1, object2, object3, ...);

    智能合并

    merge.smart(...configuration | [...configuration])

    webpack-merge尝试在使用merge.smart时智能合并加载程序,具有匹配测试的加载器将合并为单个加载器值。

    下面的例子是用web pack 1语法编写

    package.json

    {
     "scripts": {
     "start":"webpack-dev-server",
     "build":"webpack" },
     // ...}

    webpack.config.js

    var path =require('path');var merge =require('webpack-merge');varTARGET=process.env.npm_lifecycle_event;var common = {
     entry:path.join(__dirname, 'app'),
     ... module: {
     loaders: [
     {
     test:/.css$/,
     loaders: ['style', 'css'],
     },
     ],
     },
    };if(TARGET==='start') {
     module.exports=merge(common, {
     module: {
     // loaders will get concatenated! loaders: [
     {
     test:/.jsx?$/,
     loader:'babel?stage=1',
     include:path.join(ROOT_PATH, 'app'),
     },
     ],
     },
     ... });
    }if(TARGET==='build') {
     module.exports=merge(common, {
     ... });
    }...

    加载器字符串值loader:'babel'替代彼此。

    merge.smart({
     loaders: [{
     test:/.js$/,
     loader:'babel' }]
    }, {
     loaders: [{
     test:/.js$/,
     loader:'coffee' }]
    });// will become{
     loaders: [{
     test:/.js$/,
     loader:'coffee' }]
    }

    加载器数组值loaders: ['babel']将被合并没有重复。

    merge.smart({
     loaders: [{
     test:/.js$/,
     loaders: ['babel']
     }]
    }, {
     loaders: [{
     test:/.js$/,
     loaders: ['coffee']
     }]
    });// will become{
     loaders: [{
     test:/.js$/,
     // appended because Webpack evaluated these from right to left// this way you can specialize behavior and build the loader chain loaders: ['babel', 'coffee']
     }]
    }

    加载器数组值loaders: ['babel']可以通过包括原始加载器重新排序。

    merge.smart({
     loaders: [{
     test:/.js$/,
     loaders: ['babel']
     }]
    }, {
     loaders: [{
     test:/.js$/,
     loaders: ['react-hot', 'babel']
     }]
    });// will become{
     loaders: [{
     test:/.js$/,
     // order of second argument is respected loaders: ['react-hot', 'babel']
     }]
    }

    加载程序查询字符串 loaders: ['babel?plugins[]=object-assign'] 将被覆盖。

    merge.smart({
     loaders: [{
     test:/.js$/,
     loaders: ['babel?plugins[]=object-assign']
     }]
    }, {
     loaders: [{
     test:/.js$/,
     loaders: ['babel', 'coffee']
     }]
    });// will become{
     loaders: [{
     test:/.js$/,
     loaders: ['babel', 'coffee']
     }]
    }

    源值中的加载器数组将合并加载器字符串到它们中。

    merge.smart({
     loaders: [{
     test:/.js$/,
     loader:'babel' }]
    }, {
     loaders: [{
     test:/.js$/,
     loaders: ['coffee']
     }]
    });// will become{
     loaders: [{
     test:/.js$/,
     // appended because Webpack evaluated these from right to left! loaders: ['babel', 'coffee']
     }]
    }

    源值中的加载器字符串总是重写。

    merge.smart({
     loaders: [{
     test:/.js$/,
     loaders: ['babel']
     }]
    }, {
     loaders: [{
     test:/.js$/,
     loader:'coffee' }]
    });// will become{
     loaders: [{
     test:/.js$/,
     loader:'coffee' }]
    }

    多重合并

    merge.multiple(...configuration | [...configuration])

    有时你可能需要支持多个目标,webpack-merge将接受一个对象,其中每个键代表目标配置,输出变成一个配置数组,其中匹配键被合并,而非匹配键被添加。

    var path =require('path');var baseConfig = {
     server: {
     target:'node',
     output: {
     path:path.resolve(__dirname, 'dist'),
     filename:'lib.node.js' }
     },
     client: {
     output: {
     path:path.resolve(__dirname, 'dist'),
     filename:'lib.js' }
     }
     };// specialized configurationvar production = {
     client: {
     output: {
     path:path.resolve(__dirname, 'dist'),
     filename:'[name].[hash].js' }
     }
     }module.exports=merge.multiple(baseConfig, production)

    开发

    • npm i
    • npm run watch

    许可证

    webpack-merge在MIT下可用,有关详细信息,请参阅许可证。

    讨论
    Fansisi profile image