webpack:1 概念

loader的作用： 是用来处理不同类型的文件，操作的是文件
plugin的作用： 是一个扩展器，不操作文件，用来增强功能

其它webpack的使用看webpack原汁原味的 官网

高级的玩法：
有可能社区没有自己想要功能的插件，这个时候就需要自己来写webpack的plugin插件了；

---

项目目录安装： npm install webpack webpack-cli --save-dev 然后在package.json的scripts进行配置，比如 “webpack”: “webpack”
全局安装： 安装后可以直接使用webpack命令

https://webpack.js.org/concepts/#browser-compatibility 为我们简单介绍了几个核心概念（Entry Output Loaders Plugins Mode Browser Compatibility Environment），且提供了两个视频

1. Manually Bundling an Application
   // 讲的是通过打包和编译react代码来看bunder是怎么运行的
2. Live Coding a Simple Module Bundler

// 改视频讲了两个插件的使用
let babylon = require("babylon");
let traverse =  require("babel-traverse").default;
console.log(traverse)

const code = `function square(n) {
  return n * n;
}`;
const ast = babylon.parse(code);

traverse(ast, {
  enter(path) {
    if (path.isIdentifier({ name: "n" })) {
      path.node.name = "x";
    }
  }
});

https://webpack.js.org/configuration/ 自webpack5.x后 ，webpack不会为我们生成webpack.config.js配置文件

核心概念
entry - https://webpack.js.org/concepts/entry-points/
// 告诉你怎么配置单入口、多入口、以及配置选项

loader : 链接

https://webpack.js.org/migrate/5/
告诉了我们webpack5 4 3 之间的版本迁移（webpack5最低在Node.js 10.13.0 (LTS)上运行。 比如webpack4迁移到webpack5,-> 升级plugins/loaders;更新过时的选项 options，更新webpack到5）