webpack学习笔记

1. webpack基本概念

1. webpack： JavaScript 应用程序的静态模块打包器，是目前最为流行的JavaScript打包工具之一。
2. webpack会以一个或多个js文件为入口，递归检查每个js模块的依赖，从而构建一个依赖关系图，然后依据该关系图，将整个应用程序打包成一个或多个bundle。
3. webpack是用nodejs编写，所以它依赖的运行环境就是nodejs。也正因为这一点，webpack只能识别JavaScript，所有非JavaScript（包括HTML，CSS，Typescript等）编写的文件都需要经过处理，这是借助对应的loader实现的。
4. webpack使用的是nodejs默认的模块系统：commonjs，借助nodejs提供的API来操作待打包项目的源文件（如fs模块、path模块等）。webpack将这些文件整合压缩后，输出到一个特定的目录下（通常是dist）。处理过的dist一般会被直接上传到静态资源服务器使用。

2. 使用webpack原因

1. 未打包的项目通常体积庞大，文件数量众多。如果将其直接上传到服务器，用户访问网站时，浏览器会发送大量的http请求来下载这些文件，这会给服务器带来很大的压力，同时客户端的体验也非常不好。
2. 浏览器本身不支持任何模块系统。因此，使用模块系统开发出的JavaScript代码无法直接在浏览器中运行，而模块系统对现代JavaScript开发是非常重要的。这样，我们需要有一个工具，将模块系统编写出的代码转化为浏览器所能识别的代码。webpack就可以完成这一任务。
3. 大多数情况下，我们不希望源代码暴露给用户，即使是保密性要求不那么高的前端代码。我们知道，PC端浏览器通常都提供开发者工具，可以方便地查看和调试前端代码，这在开发环境下意义重大。但对于生产环境，暴露源代码不仅没有太大意义，反而存在安全隐患（如果黑客比你更先发现代码中的bug，你可能面临严重损失）。因此，我们可以借助webpack重组和混淆源代码，增加黑客阅读源代码的难度，以提升系统的安全性。
4. 借助webpack提供的dev-server，可以实现前后端分离。dev-server本质上就是一个node服务。当通过命令行启用dev-server时，webpack会在本地启动一个node服务，将打包后的文件作为静态资源注入该服务，这样就可以在不依赖后台（这种说法并不完全准确，实际上webpack是通过node为你提供后台服务）的情况下进行前端开发了。

配置对象中包含四个核心参数：

• 入口（entry）
• 出口（output）
• 加载器（loader）
• 插件（plugin）

入口：
webpack的打包入口，也就是webpack从哪个js开始打包。一个应用程序可以有一个或多个入口，由entry属性指定，通常是一个对象。

module.exports = {
  entry: {
    main: "./src/main.js"
  }
}
// 可以简写为:
  entry: "./src/main.js"

应用程序可以有多个打包入口，多页面应用配置：

entry: {
  app: './src/app.js',
  main: './src/main.js'
}
//允许这么写：entry: ["./src/main1.js", "./src/main2.js"]

//要求webpack分别以app.js和main.js为打包入口，独立构建依赖关系图。
//最终，项目代码和第三方代码将被独立打包出来。
//构建多页应用时，也是分别为每个页面提供一个入口文件，独立构建依赖图。

出口（output）：
单页面应用打包输出

module.exports = {
  entry: {
    main: "./src/main.js"
  },
  output: {
    filename: 'bundle.js',  //文件名
    path: path.resolve(__dirname + '/dist')  //打包输出的文件路径
  }
}

多页面应用打包产生的输出，结果也会有很多个

{
  entry: {
    app: './src/app.js',
    main: './src/main.js'
  },
  output: {
    filename: '[name].js',  //使用占位符[]定义文件名
    path: path.resolve(__dirname + '/dist')
    //filename: '[name].[hash].js',  //使用热更新（HMR）的配置,有助于热更新检测到输出文件变化
    //使用splitChunk进行代码分割时，被分割出来的代码默认命名为chunk.[hash].js
  }
}
// 打包路径将输出app.js和main.js两个文件

加载器（loader）
webpack的运行环境是nodejs，因此它只能识别JavaScript。但是我们的项目中可能存在大量的非JavaScript文件，如HTML、CSS、Typescript、txt，图片文件等,他们可能就被js文件依赖，这时候就很难打包上他们。
解决这个问题，我们需要一些额外的代码帮助webpack识别js文件中的嵌套依赖。一个加载器（loader）实际上就是一个将特定的字符串转化成JavaScript代码的函数。

//配置'css-loader'和'style-loader'
module.exports = {
  module: {
    rules: [
      { 
        test: /\.css$/, 
        use: ['style-loader', 'css-loader'] //webpack将依次从后向前执行每个loader
        //因为webpack采用的是流式处理，所以loader的书写顺序非常重要，最先需要执行的loader必须放在数组的最后。
       // 执行步骤：
       //1. 使用nodejs的fs模块读取index.css，将读取到的字符串交给css-loader。
       //2.执行css-loader。它是一个函数，将原始字符串进行一定的处理，输出一个新的字符串。
       //3.将上一步输出的字符串交给style-loader，进行第二步处理，最终仍然输出一个字符串。
	   //4.由webpack解析最终的处理结果。  },
    ]
  }
};

插件（plugin）

//在webpack配置文件中使用插件：
const ConsoleLogOnBuildWebpackPlugin = require('ConsoleLogOnBuildWebpackPlugin')
module.exports = {
  ...
  plugins: [
    new ConsoleLogOnBuildWebpackPlugin()
  ]
}

3. 热更新原理
nodejs使用一个清单文件来记录当前所有的资源文件，这个清单文件也正是热更新模块的监测对象。
热更新模块监测到文件名变化后，会通过websocket将这个新的文件发送到浏览器，浏览器重新执行该文件，完成局部更新。由于只通过websocket发送了单个模块，所以页面既不会重载，也不会大面积刷新。