named-chunks-entry-module-id-plugin

将webpack入口文件的入口执行模块ID改为文件名

Usage

const HtmlWebpackPluginFlexibleScript = require('named-chunks-entry-module-id-plugin');

module.exports = {
  plugins: [
    new NamedChunksEntryModuleIdPlugin()
  ]
}

// Before
webpackJsonp(
  [1],
  {
    12: function(n, i, o) {
      n.exports = o('yZGm');
    },
    yZGm: function(n, i, o) {
    }
  },
  [12]
);

// After
webpackJsonp(
  [1],
  {
    'myChunkName-executeModules': function(n, i, o) {
      n.exports = o('yZGm');
    },
    yZGm: function(n, i, o) {
    }
  },
  ['myChunkName-executeModules']
);

QA

Q: 为什么生成的name要加上-executeModules A: 因为会和NamedChunksPlugin这个插件引起冲突

/* 
 * NamedChunksPlugin + NamedChunksEntryModuleIdPlugin 
 * 如果不加-executeModules
 */

// Before
webpackJsonp(
  [1],
  {
    12: function(n, i, o) {
      n.exports = o('yZGm');
    },
    yZGm: function(n, i, o) {
    }
  },
  [12]
);

// After
webpackJsonp(
  ['myChunkName'],
  {
    'myChunkName': function(n, i, o) {
      n.exports = o('yZGm');
    },
    yZGm: function(n, i, o) {
    }
  },
  ['myChunkName']
);

这样就会造成chunkId和chunkEntryId重复，造成死循环调用