webpack深入学习笔记

疑问：

1. webpack的plugin执行顺序，都是在哪个阶段执行
2. webpackJsonp

---

1. webpack4.0 以后需要安装webpack-cli，CLI => 命令行接口(command line interface)，其实webpack-cli也不是必须的，但是在webpack启动的时候需要它，它的作用就是在例如执行webpack --config webpack.config.js时将参数传给webpack。参考:https://www.webpackjs.com/api/cli/

2. 执行webpack，

   1. 首先去看webpack命令后面有没有指定配置文件，若没有，
   2. 再去寻找当前目录下有没有webpack.config.js，若没有，
   3. 去寻找当前文件夹下的src下有没有index.js，若没有，就报错

3. webpack提供的自动编译方式：

   1. webpack watch mode
   2. webpack-dev-server
   3. webpack-dev-middleware
      

   a. 对于第一种方式：当文件变化的时候虽然每次都能自动执行重新编译，但是浏览器不会自动刷新，如果想让浏览器自动刷新，那么还可能需要借助live-server插件。但是，仍有以下效率不高的问题：
   4. 对所有的源代码都重新进行编译
   5. 编译成功后,都会生成新的文件(文件操作 file system)
   6. live-server属于VSCode插件(vim/webstorm) -> 不属于webpack给我们的解决方案
   7. live-server每次都会重新刷新整个页面

   b. 对于第二种方式：webpack-dev-server
   webpack-dev-server除了能够自动编译，自动刷新浏览器外，还给我们提供了hot module replacement(HMR)能力。
   除此之外，webpack-dev-server在编译之后不会写入到任何输出文件，而是将bundle文件保留在内存中，事实上，webpack-dev-server使用了一个库叫memfs(memory-fs，webpack自己写的)

   c. 对于第三种方式：webpack-dev-server在内部使用了它，然而它可以作为一个单独的package使用，以便根据需要进行更多自定义设置；（一般很少使用，了解即可）

   // 自己写一个dev-Server
   const express = require('express');
   const webpack = require('webpack');
   const webpackDevMiddleware = require('webpack-dev-middleware');
   
   const app = express();
   
   const config = require("./webpack.config");
   
   // 传入配置信息, webpack根据配置信息进行编译
   const compiler =  webpack(config);
   
   const middleware = webpackDevMiddleware(compiler);
   app.use(middleware);
   
   app.listen(3000, () => {
     console.log("服务已经开启在3000端口上");
   });
   

---

{
  "name": "01_learn_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"  // 什么也不错配置，默认去src/index.js下寻找入口文件
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.14.0",
    "webpack-cli": "^4.3.1"
  }
}

---

在使用 webpack 构建的典型应用程序或站点中，有三种主要的代码类型：

• 你或你的团队编写的源码。
• 你的源码会依赖的任何第三方的 library 或 “vendor” 代码。
• webpack 的 runtime 和 manifest，管理所有模块的交互。