webpack基础（一）概念

• 什么是webpack
  webpack是现在JavaScript应用程序的静态模块打包器。当webpack处理应用程序的时候，它会递归的构建一个依赖关系图。其中包括应用程序需要的每个程序。然后将所有的这些模块打包成一个或者多个bundle
• webpack核心概念
  1. 虽然webpack从4.0+开始实现0配置功能，但是实现0配置只能实现一些简单的操作，并不能实现复杂操作，因此在现实的项目中我们都自己手动配置webpack已到达项目的需求
  2. webpack中有四个核心概念，即入口（entry）输出（output）loader 插件（plugins）
  • 入口（entry）：入口就是webpack开始编译打包的开始位置，如果一个项目中没有如何，那么会出现打包出错的情况。入口存在默认webpack配置，即根目录src文件下的index文件（./src/index）
  • 输出（output）:出口就是webpack执行打包文件结束之后生成的bundle文件存储的位置。输出也存在默认配置。默认打包生成的文件保存在根目录下的dist文件下面（dist文件如果存在，就直接打包到文件目录下，如果不存在就先创建dist目录，然后在保存到dist文件下面）
  • loader：loader的产生的的原因是因为webpack只对.js和.json文件能够识别，并且编译。对于其他的文件不能识别和编译。所以需要引入loader来解析特定的文件。loader在webpack中的的module结构下的rules下配置指定的loader。一个loader只有一个功能，理论上只要有足够多的loader，所以的文件类型都能被webpack认识

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

• 插件(plugins):loader的主要的职责是让webpack认识更多的类型。而plugin的职责就是让其可以控制构建流程，从而执行一些特殊的任务。插件的功能非常强大，可以完成各种各样的任务

额外的几个核心概念

• chunk:指的是代码块，一个chunk可能由多个模块组合而成，也用于代码合并和分割
• bundle：资源经过webpack流程解析之后编译完成之后输入的文件
• mode:4.0开始webpack支持零配置,为的就是减少上手难度，同时mode的概念也可以用于打包的目标环境，已便在打包的过程中启动webpack针对不同环境的内置优化