学习webpack(一)：webpack的基本认识和搭建

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

webpack是什么？

webpack is static module bundler for modern Javascript applications

webpack 是一个静态的模块化打包工具，为现代的JavaScript应用程序。

打包工具bundler: webpack 可以将帮助我们进行打包，所以他是一个打包工具

静态的static： 这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）

模块化module： webpack默认支持各种模块化开发 ESModule，CommonJS，AMD等

现代的modern： 我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和法展

webpack图解

webpack使用前提

webpack的中文官网：https://webpack.docschina.org/

webpack的运行是依赖于node环境的

node版本最好安装在14版本以上

webpack安装

安装webpack webpack-cli

webpack-cli 就是对终端中的指令进行读取 比如：webpack --entry ./src/index.ts等等指令。

但是在vue react中项目中是不需要这个webpack-cli的

//全局安装
npm install webpack webpack-cli -g
//局部安装
npm install webpack webpack-cli -D

webpack打包的基本使用

定义两个文件，放在js文件下面 分别使用 ES Module 和 CommonJS 的形式

// src/js/math.js

function sum(num1, num2) {
    return num1 + num2
}

//ES Module
export default sum

// src/js/format.js

function format() {
    return '￥99.88'
}

//CommonJS
module.exports = {
    format
}

在src的入口文件中，导致这两个模块

// src/index.js

import sum from "./js/math"
const { format } = require('./js/format')

console.log(sum(10,20))
console.log(format())

可以重新创建一个html文件来测试下，这个 src/ index.js，是否可以在浏览器上编译成功？

答案显然易见： 肯定是不可能的。因为为浏览器不识别 ES Module 和 CommonJS 这个模块的导入导出。

webpack打包

在编译器的终端中，进入对应的文件中，直接执行 webpack指令。

会发现在文件夹下会多出一个 dist的文件夹，下面有个main.js压缩文件

再次导入刚刚创建的html文件，就会发现浏览器可以识别。

webpack的作用就是把浏览器不能识别的文件，转化为浏览器能够识别的文件

全局安装和局部安装的对比

在上面使用的 webpack指令的时候，就是全局的webpack。也就是所谓的webpack5，但是我有个vue项目，脚手架中的webpack的版本是webpack4，那么打包的时候还是用的全局安装的webpack5的话，就会重新兼容性问题。

​ 所以，一般来说，每个项目都对应一个局部安装的webpack版本，这样不会产生兼容性问题。

打包执行指令

webpack    //执行就是全局运行

./node_module/.bin/webpack    //执行的是局部的webpack

npx webpack    //优先中node_module/.bin文件，如果没有找到再去找全局的 

执行脚本文件package.json

{
  "name": "01_basic_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"    //这里会自动的去node_module/.bin文件下面去找
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.50.0",
    "webpack-cli": "^4.8.0"
  }
}

然后通过执行npm run build指令来打包

webpack的基本配置

在上面的指令中，没有指定任何的路径，就能打包成功，是因为，在webpack内部的默认值就是./src/index.js 打包的输出文件./dist/main.js

那怎么手动配置文件的入口，或者打包的出口呢？

webpack.config.js是手动配置webpack的基本信息

module.exports = {
    //入口文件 （可以修改地址）
    entry: './src/index.js',
    //打包的出口文件
    output: {
        //打包的路径
        path: path.resolve(__dirname, './build'),
        //打包过后的文件名
        filename: 'build.js'
    }
}

小知识点：

webpack.config.js是会被被默认读取的，那想改改它的名字呢？

//package.json
"scripts": {
   "build": "webpack --config copyer.config.js" 
 },

理解webpack的依赖图

在上面webpack打包的过程中，定义了 math.js 和 format.js 两个文件，并且在 index.js中引入这两个模块，所以这两个文件都会被打包解析。

重新创建一个文件 element.js

let el = document.createElement('div')

el.innerHTML = 'copyer'

document.body.appendChild(el)

当我们再次执行的打包命令的时候，会发现这个文件没有效果。简单来说，就是写了代码，没有地方使用。当把element.js随便放在上面的一个文件中，这个文件就会有效果。为什么呢？

这就涉及到了webpack的依赖图。

什么是webpack的依赖图：

简单来说，webpack从入口文件解析，会拿到入口文件中的所有模块，在各自模块内部又有对应的依赖，webpack也会进行解析，这样不停的依赖，就会形成一个图。只要一个文件没有在这个依赖图里面，就不会对其进行解析。