【前端必会】单页应用-你的新朋友wepack

背景

1. 我们开发的功能可能是简单的，但是实现功能的代码行数却可能成千上万
2. 出于易于维护、安全、服用，我们会根据我们的经验设计我们的代码，拆解成多个独立的功能模块（代码片段、更多的文件）
3. JS的模块规范有很多，CMD、AMD、UMD、ES6Modules等。
4. 我们知道浏览器的web页面却无法识别诸如require、import的语法或函数，那么浏览器如何加载js的呢？其它的模块资源（图片、样式文件）又是如何加载到浏览器中的呢？

浏览器加载资源

1. 浏览器地址栏请求页面地址，服务器返回的是页面资源，页面渲染时再加载其它依赖的资源（样式、图片、脚本）
2. 加载脚本使用html的 <script> 标记，可以直接已内联方式编写脚本，也可以加载远程js文件，
3. 样式编写方式多种多样，写在dom的style属性，<style>标记，link css文件
4. 图片主要分为<img />与样式表中的url,目前主要就是远程地址或者base64的字符串
5. 加载多个资源需要多个<script> 标记,并且js文件直接很难看出依赖关系，实质上是各个js文件中变量、函数向页面的混入
6. js文件的加载顺序，资源多种多样，等等。统一而且简单前端资源的加载是一种趋势，于是我们的朋友webpack诞生了。

介绍

webpack是一个基于node的开发时的工具，源代码（包括所有资源）经过webpack打包生成可以运行目标的代码（html页面或者一个库文件）

webpack有很多插件与loader，可以对源代码进行一些预处理（ES6翻译、代码压缩）

webpack，因为它可以让你以模块的方式思考

安装、demo参考

https://webpack.docschina.org/guides/getting-started/

//webpack.config.js
const path = require("path");

module.exports = {
  optimization: {
    minimize: false,
  },
  entry: "./src/main.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
};

//index.js
export default function sum(a, b) {
  return a + b;
}

//main.js
import sum from './index'
console.log(sum(1,2))

npm脚本添加

"build": "webpack"

执行后dist目录生成main.js

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
var __webpack_exports__ = {};

;// CONCATENATED MODULE: ./src/index.js
function sum(a, b) {
  return a + b;
}

;// CONCATENATED MODULE: ./src/main.js

console.log(sum(1,2))

/******/ })()
;

webpack生成的文件是个立即执行的匿名函数，把main.js和index.js 的代码直接生成到启动函数中了，

总结

1. webpack是我们的好朋友
2. 可以把webpack理解成工程的编译行语言编译器(没有编译的源代码无法在浏览器中执行，可能描述的不够严谨)
3. 目标代码一定有一个入口
4. 目标代码主要就是用webpack的方式定义工程中的模块，执行入口，以及模块依赖加载的工作
5. 目标代码这么简单？有没有更复杂一点的模块呢？