entry入门

前言

基于前面的入门文章，你对webpack的入口文件的概念应该比较清楚了，那么本文主要介绍一些entry配置细节。

概念解释

如上图所示，在多个代码模块中会有一个起始的 .js 文件，这个便是 webpack 构建的入口。webpack 会读取这个文件，并从它开始解析依赖，然后进行打包。如图，一开始我们使用 webpack 构建时，默认的入口文件就是 ./src/index.js。

我们常见的项目中，如果是单页面应用，那么可能入口只有一个；如果是多个页面的项目，那么经常是一个页面会对应一个构建入口。

入口可以使用 entry 字段来进行配置，webpack 支持配置多个入口来进行构建。

不同写法场景

//单文件入口
module.exports = {
  entry: './src/index.js' 
}
// 上述配置等同于
module.exports = {
  entry: {
    main: './src/index.js'
  }
}
//支持对象语法
module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};
// 或者配置多个入口
module.exports = {
  entry: {
    foo: './src/page-foo.js',
    bar: './src/page-bar.js', 
    // ...
  }
}
// 使用数组来对多个文件进行打包，多个文件作为一个入口，webpack 会解析两个文件的依赖后进行打包
module.exports = {
  entry: {
    main: [
      './src/foo.js',
      './src/bar.js'
    ]
  }
}

实际方案

单文件以及供应商

主要适用于有些第三方的文件不用杂糅到入口文件，分别进行依赖打包。

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

多页应用入口方案设计

这个方案主要是针对多页应用的设计，我们可以针对多页分别设计自己的入口，除了更加清晰之外，讲为不同的入口文件提供不同的页面模板，有利于更好的提取公共文件，对于其他页面没有必要的文件不用加载。在入口点之间重复使用大量代码/模块的多页面应用程序可以大大受益于这些技术。

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

备注：作为经验法则：一个页面最好只用一个入口文件的js

参考文档

• 掘金小册《使用 webpack 定制前端开发环境》
• webpack官网介绍