webpack从入门到放弃（二：基本属性）

        本节介绍webpack五大核心概念

一、entry（入口）

        指示 Webpack 从哪个文件开始打包，webpack是根据依赖关系进行打包，以入口文件为起点，根据依赖关系形成依赖树，在生产模式打包时，根据tree-shaking未引用的文件不会打包，减小打包体积

二、output（输出）

        指示 Webpack 打包完的文件输出到哪里去，如何命名等

三、loader（加载器）

        帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。webpack 本身只能处理 js、json 等资源，其他资源（css、less、sacc、图片等）需要借助 loader，Webpack 才能解析。

        我们在需要解析不同类型文件时可以到webpack官网查询loader使用文档

       Webpack 官方 Loader 文档https://webpack.docschina.org/loaders/

四、plugins（插件）

       webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。 webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。

        上面是我抄来的，最简单的理解就是插件补充webpack本身的功能，使webpack功能更加完善

五、mode（模式）

        主要由两种模式：

• 开发模式：development
• 生产模式：production

开发模式主要做两件事

  1、编译代码，使浏览器能识别运行

  开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

  2、代码质量检查，树立代码规范

  提前检查代码的一些隐患，让代码运行时能更加健壮。

  提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

生产模式是开发完成代码后，我们需要得到代码将来部署上线。

这个模式下我们主要对代码进行优化，让其运行性能更好。

优化主要从两个角度出发:

1. 优化代码运行性能
2. 优化代码打包速度

基本示例

准备webpack文件

在项目根目录下新建文件：webpack.config.js

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范

修改配置文件

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

运行指令

npx webpack

这里也和之前一样，只能识别js代码，后面介绍不同文件类型的解析