Webpack 入口和上下文

入口对象是用于 webpack 查找开始构建 bundle 的地方。上下文是入口文件所处的目录的绝对路径的字符串。

context

​string​

基础目录，绝对路径，用于从配置中解析入口点(entry point)和 加载器(loader)。

const path = require('path');

module.exports = {
  //...
  context: path.resolve(__dirname, 'app'),
};

默认使用 Node.js 进程的当前工作目录，但是推荐在配置中传入一个值。这使得你的配置独立于 CWD(current working directory, 当前工作目录)。

entry

​string​ ​[string]​ ​object = { <key> string | [string] | object = { import string | [string], dependOn string | [string], filename string, layer string }} (function() => string | [string] | object = { <key> string | [string] } | object = { import string | [string], dependOn string | [string], filename string })​

开始应用程序打包过程的一个或多个起点。如果传入数组，则会处理所有条目。

动态加载的模块 不是 入口起点。

一个需要考虑的规则：每个 HTML 页面都有一个入口起点。单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。

module.exports = {
  //...
  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js',
  },
};

Naming

如果传入一个字符串或字符串数组，chunk 会被命名为 ​main​。如果传入一个对象，则每个属性的键(key)会是 chunk 的名称，该属性的值描述了 chunk 的入口点。

Entry descriptor

如果传入一个对象，对象的属性的值可以是一个字符串、字符串数组或者一个描述符(descriptor):

module.exports = {
  //...
  entry: {
    home: './home.js',
    shared: ['react', 'react-dom', 'redux', 'react-redux'],
    catalog: {
      import: './catalog.js',
      filename: 'pages/catalog.js',
      dependOn: 'shared',
      chunkLoading: false, // Disable chunks that are loaded on demand and put everything in the main chunk.
    },
    personal: {
      import: './personal.js',
      filename: 'pages/personal.js',
      dependOn: 'shared',
      chunkLoading: 'jsonp',
      asyncChunks: true, // Create async chunks that are loaded on demand.
      layer: 'name of layer', // set the layer for an entry point
    },
  },
};

描述符语法可以用来传入额外的选项给入口。

Output filename

默认情况下，入口 chunk 的输出文件名是从 ​output.filename​ 中提取出来的，但你可以为特定的入口指定一个自定义的输出文件名。

module.exports = {
  //...
  entry: {
    app: './app.js',
    home: { import: './contact.js', filename: 'pages/[name][ext]' },
    about: { import: './about.js', filename: 'pages/[name][ext]' },
  },
};

描述符语法在这里被用来将 ​filename​—选项传递给指定的入口点。

Dependencies

默认情况下，每个入口 chunk 保存了全部其用的模块(modules)。使用 ​dependOn​ 选项你可以与另一个入口 chunk 共享模块:

module.exports = {
  //...
  entry: {
    app: { import: './app.js', dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

​app​ 这个 chunk 就不会包含 ​react-vendors​ 拥有的模块了.

​dependOn​ 选项的也可以为字符串数组：

module.exports = {
  //...
  entry: {
    moment: { import: 'moment-mini', runtime: 'runtime' },
    reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' },
    testapp: {
      import: './wwwroot/component/TestApp.tsx',
      dependOn: ['reactvendors', 'moment'],
    },
  },
};

此外，你还可以使用数组为每个入口指定多个文件：

module.exports = {
  //...
  entry: {
    app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

Dynamic entry

如果传入一个函数，那么它将会在每次 make 事件中被调用。

要注意的是，make 事件在 webpack 启动和每当 监听文件变化 时都会触发。

module.exports = {
  //...
  entry: () => './demo',
};

或者

module.exports = {
  //...
  entry: () => new Promise((resolve) => resolve(['./demo', './demo2'])),
};

例如，你可以使用动态入口来从外部来源（远程服务器，文件系统内容或者数据库）获取真正的入口：

webpack.config.js

module.exports = {
  entry() {
    return fetchPathsFromSomeExternalSource(); // 返回一个会被用像 ['src/main-layout.js', 'src/admin-layout.js'] 的东西 resolve 的 promise
  },
};

当和 ​output.library​ 选项结合：如果传入的是一个数组，只有数组的最后一个条目会被导出。