1. webpack 概念1. webpack、webpack-cli 作用 2. 全局安装和局部安装 3. web

QQ截图20240330154519.png

Webpack是什么？

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

打包bundler：webpack 可以将帮助我们进行打包，所以它是一个打包工具
静态的static：可以将代码打包成最终的静态资源（部署到静态服务器）
模块化module：webpack 默认支持各种模块化开发，ES Module、CommonJS、AMD 等
现代的modern：正是因为现代前端开发面临各种各样的问题，才催生了 webpack 的出现和发展

webpack、webpack-cli 作用

webpack 的安装目前分为两个：webpack、webpack-cli
控制台中执行 webpack 指令，会执行 node_modules 下的 .bin 目录下的 webpack 文件，webpack 的执行依赖 webpack-cli，如果没有安装 webpack-cli 就会报错。在 webpack-cli 中代码执行时，才是真正利用 webpack 进行编译和打包的过程。

全局安装和局部安装

npm install webpack webpack-cli –g #全局安装 
npm install webpack webpack-cli –D #局部安装 (项目中使用)

全局安装：如果只有全局的 webpack，那么打包的时候，用了全局的 webpack，不同开发人员的电脑的 webpack 版本不同会导致包的安装版本不同。
局部安装：每一个项目都有自己的 webpack 的版本， –D 是开发时依赖，定义了统一的 webpack 版本，打包的时候不会出现包的版本问题。直接在命令行中执行 webpack 找的是全局的 webpack，如果想用局部的 webpack：去 node_modules 中的 .bin 中找 webpack：./node_modules/.bin/webpack。执行npx webpack 默认找 node_modules 中的 .bin 下的 webpack 文件在 package.json 中写脚本 "build": "npx webpack"，在使用的时候 npm run build 相当于执行了 webpack 指令。

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.14.0",
    "webpack-cli": "^4.3.1"
  }
}

webpack 是如何确定入口

运行 webpack 时，webpack 会查找当前目录下的 src/index.js 作为入口，如果没有存在 src/index.js 文件，就会报错。

webpack 是如何对项目进行打包

根据命令或者配置文件找到入口文件，从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、字体等)然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）

webpack 可以直接打包 import 和 export

ESmodule
src/js/math.js

export const sum = (num1, num2) => {
  return num1 + num2;
}
export const mul = (num1, num2) => {
  return num1 * num2;
}

CommonJS
src/js/format.js

const dateFormat = (date) => {
  return "2020-12-12";
}

const priceFormat = (price) => {
  return "100.00";
}

module.exports = {
  dateFormat,
  priceFormat
}

src/index.js

import { sum, mul } from './js/math.js';
const { dateFormat, priceFormat } = require('./js/format');

console.log(sum(20, 30));
console.log(mul(20, 30));

console.log(dateFormat("1213"));
console.log(priceFormat("1213"));

执行npm run build 打包之后的代码直接在 index.html 中引入，无需加入 type="module" 打包后的代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚打包后的文件是否需要转成ES5之前的语法，需要通过babel来进行转换和设置。

Webpack配置文件

在通常情况下，webpack需要打包的项目是非常复杂的，需要一系列的配置来满足要求，默认配置必然是不可以的。
在根目录下创建一个 webpack.config.js 文件，来作为webpack的配置文件。

const path = require('path');
module.exports = {
    entry: "./src/index.js",
    output: {
      filename: "bundle.js",
      // 必须是一个绝对路径
      path: path.resolve(__dirname, "./build")
    }
}

文章引用：

解决webpack : 无法加载文件

1. webpack 概念