Webpack不同名稱的條目

Question

如何爲不同的輸入輸出指定不同的filename？

例如：

module.exports = { 
    context: path.resolve(__dirname, 'assets'), 
    entry: { 
    vendor: ['react', 'react-dom', 'lodash', 'redux'], 
    app: './src/app.js' 
    } 
    output: { 
    path: path.resolve(__dirname, (isDevelopment) ? 'demo' : 'build'), 
    filename: (isDevelopment) ? '[name].js' : '[name][chunkhash:12].js' 
    } 
} 

要接收輸出這樣

build 
-- index.html 
-- app.2394035ufas0ue34.js 
-- vendor.js 

所以瀏覽器會緩存vendor.js所有庫。因爲我不打算很快和經常遷移到任何主要的新版本。 並且仍然能夠在需要每次更新時爲app.js中斷緩存。

是有某種選項的設置output爲

output: { 
    app: { 
    ... 
    }, 
    vendor: { 
    ... 
    }, 
} 

Answer 1

這裏是工作代碼：

entry: { 
    './build/app': './src/app.js', 
    './build/vendor': VENDOR_LIBS // or path to your vendor.js 
    }, 
    output: { 
    path: __dirname, 
    filename: '[name].[chunkhash].js' 
    }, 

這段代碼添加到您的WebPack plugins數組作爲數組的最後一個元素。

plugins: [ 
... // place our new plugin here 
] 

function() { 
    this.plugin("done", function(stats) { 
    const buildDir = __dirname + '/build/'; 
    const fs = require('fs'); 
    var vendorTempFileName = ''; 

    new Promise(function(resolve, reject) { 

     fs.readdir(buildDir, (err, files) => { 
     files.forEach(file => { 

     if (file.substr(0,6) === 'vendor') { 
      resolve(file); 
     } 

     }); 
     }); 
    }).then(function(file) { 

     fs.rename(buildDir + file, buildDir + 'vendor.js', function(err) { 
     if (err) console.log('ERROR: ' + err); 
     }); 

    }); 

    }); 
} 

輸出應該如下：

它被認爲是不好的做法，留下您的文件，而無需chunkhashes，由於瀏覽器緩存。