Webpack 入口entry

本节主要讲解Webpack的资源入口entry以及基础目录context。

在之前的Webpack快速入门一节，我们已经学习了简单的资源入口知识，我们的配置文件如下

  var path = require('path');  

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: 'bundle.js'
    },
    mode: 'none'
  };

上述配置表示从当前根目录下的a.js开始打包，打包得到bundle.js。entry表示的就是资源入口文件，我们可以看到它是一个相对路径。

一、Webpack基础目录context

我们上面的配置其实省略了一个配置参数context，Webpack官方称之为基础目录( base directory)。

context在Webpack中表示资源入口entry是从哪个目录为起点的。context的值是一个字符串，表示一个绝对路径。

下面的配置表示从工程根目录下src文件夹下的js文件夹里的a.js开始打包。

配套代码是github仓库 https://github.com/jruit/webpack-tutorial 的webpack2-1例子

  var path = require('path');  

  module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: './js/a.js',  // a.js里又引入了b.js
    output: {
      path: path.resolve(__dirname, ''),
      filename: 'bundle.js'
    },
    mode: 'none'
  };

我们执行npx webpack，完成打包。执行的命令行控制台告诉我们a.js和b.js顺利打包成bundle.js，控制台各行表示的含义，我们在之后章节讲。

一般我们不会去设置context，在我们没有设置context的时候，它是当前工程的根目录。

二、Webpack资源入口entry

Webpack资源入口entry代表的路径，要是相对路径。目前我们使用的entry都是字符串形式的，其实它还可以是数组、对象和函数形式。

1.入口entry是字符串形式

字符串形式的我们已经在之前使用过了，是最简单的形式，表示打包的入口JS文件。

2.入口entry是数组形式

在babel-polyfill一节（第7种方法：在前端工程构建工具的配置文件入口里引入core-js/stable与regenerator-runtime/runtime），我们就是使用了数组形式的入口。

  module.exports = {
    entry: ['core-js/stable', 'regenerator-runtime/runtime', './a.js'],
  };

它表示的含义是数组最后一个文件是资源的入口文件，数组其余文件会预先构建到入口文件。

上面的配置和下面是等效的。

  // a.js
  import 'core-js/stable';
  import 'regenerator-runtime/runtime';

  // webpack.config.js
  module.exports = {
    entry: './a.js',
  };

数组形式的入口本质还是一个入口。

3.入口entry是对象形式

入口entry是对象形式的又称之为多入口配置。之前我们讲的都是单入口的配置，本质上打包后生成一个JS文件。

多入口配置，本质上打包后生成多个JS文件。

  var path = require('path');  

  module.exports = {
    entry: {
      app: ['core-js/stable', 'regenerator-runtime/runtime', './a.js'],
      vendor: './vendor'
    },
    output: {
      path: path.resolve(__dirname, ''),
      filename: '[name].js'
    },
    mode: 'none'
  };

上方的配置分别从两个入口文件打包，每个入口文件各自寻找自己依赖的文件模块打包成一个JS文件，最终得到两个JS文件。

4.入口entry函数形式

函数形式的入口，Webpack取函数返回值作为入口配置，返回值是上述3种之一即可。

函数形式的entry，可以用来做一些额外的逻辑处理，不过在自己搭脚手架的很少使用。

三、小结

Webpack资源入口，表示它是从哪个JS文件开始打包的。Webpack要找到这个文件，是通过context和entry这两个参数。

context是一个绝对路径，是基础目录的意思。entry是一个相对路径，它与context拼接起来，就是Webpack打包的入口文件了。

Webpack的资源入口与出口是紧密相关的，下一节我们详细解释资源出口。

注：

1.我们目前对构建过程不进行额外的处理，因此一个入口只会生成一个打包后的文件，这也是Webpack的构建本质。