重构Webpack系列之二 ---- 入口起点

重构Webpack系列之二 ---- 入口起点

一、概念

入口起点（entry point）指示Webpack应该使用哪个模块，来作为构建其内部依赖图的开始。

进入入口起点后，Webpack会找出哪些模块和库是跟入口起点（直接或间接）有依赖的关系。

默认值是./src/index.js，但可以通过在webpack configuration中配置entry属性，来指定一个（或多个）不同的入口起点。例如：

本文以下代码均在webpack.config.js之中实现

module.exports = {
  entry: './path/to/my/file.js'
}

二、单个入口

1.默认字符串写法

module.exports = {
  entry: './path/to/my/entry/file.js'
}

当你希望通过一个入口（例如一个库）为应用程序或工具快速设置webpack配置时，单一入口的语法方式就以及可以满足了。

除此之外，webpack的entry属性还提供了对象语法，可以为webpack配置多个入口起点，使用这种语法方式来扩展或调整配置则更具备有灵活性。

用法：entry: {<entryChunkName> String | [string]} | {}

2.对象写法（单个入口）

module.exports = {
  entry: {
	main: './path/to/my/entry/file.js'
  }
}

3.对象写法（多个入口）

module.exports = {
  entry: {
	app: './src/app.js',
	adminApp: './src/adminApp.js'
  }
}

4.数组写法

这将创建一个所谓的“multi-main-entry”。在你想要一次注入多个以上文件，并且将他们的依赖关系绘制在一个“chunk”中时，这种方法很有用。

module.exports = {
  entry: ['./src/file_1.js','./src/file_2.js'],
  output: {
	filename: 'bundle.js'
  }
}

三、entry的配置选项

1. dependOn
   当前入口所依赖的入口。他们必须在该入口被加载前加载。
2. filename
   指定要输出的文件名称。
3. import
   启动时需要加载的模块。
4. library
   指定library选项，为当前entry构建一个library。（日常开发基本上用不到）
5. runtime
   运行时chunk的名字。如果设置了，就会创建一个新的运行时的chunk。在webpack@5之后可将其设置为false，以用来避免运行时生成新的chunk。

基本用法

module.exports = {
  entry: {
	a2: 'dependingfile.js',
	b2: {
	  publicPath: '/',
	  dependOn: 'a2',
	  import: './src/app.js'
	}
  }
}

需要注意的是，请确保runtime不能指向已存在的入口名称

module.exports = {
  entry: {
    a1: './a',
    b1: {
	  runtime: 'a1' //这里，不行
	  import: './b'
	}
  }
}

另外需要注意runtime和dependOn不可以同时存在于同一个入口上，dependOn也不能够循环引用的

// 不能同时存在，会报错

module.exports = {
  entry: {
	a2: './a',
	b2: {
	  runtime: 'x2',
	  dependOn: 'a2', // 这里不能同时存在，否则会报错
	  import: './b'
	}
  }
}

// dependOn不可以循环引用

module.exports = {
  entry: {
    a3: {
      import: './a',
      dependOn: 'b3'
    },
    b3: {
      import: './b',
      dependOn: 'a3'
    }
  }
}

四、多入口应用实例

在webpack<4的版本中，开发者想要分离app（应用程序）和vendor（第三方库）的入口，通常将vendor作为一个单独的入口添加到entry选项中，以将其编译为一个单独的文件（与CommonChunkPlugin结合使用）。例如：

但在webpack>4版本中不鼓励这样做，而是使用optimization.splitChunks选项，将vendor和app（应用程序）模块分开，并为其创建一个单独的文件。不要为vendor或其他library执行起点创建entry。

// webpack.config.js

module.exports = {
  entry: {
	main: './src/app.js',
	vendor: './src/vendor.js'
  }
}

// webpack.prod.js

module.exports = {
  output: {
	filename: '[name].[contenthash].bundle.js'
  }
}

// webpack.dev.js

module.exports = {
  output: {
	filename: '[name].bundle.js'
  }
}

通过上面的配置，我们可以在vendor.js中存入未做修改的必要library或文件（例如Bootstrap，jQuery，图片等），然后将他们打包在一起称之为单独的chunk。内容哈希保持不变，这使得浏览器可以单独的缓存他们，从而减少了打开网页的加载时间。

五、多页面应用程序

上面的内容都好理解，多页面应用程序内容较多需要重开一文来进行说明，请期待下一文。

至此，webpack的入口起点知识点到这里就结束了，各位看官不妨点点赞，支持本菜鸟的创作把！