初始化 & 基本概念

原稿：语雀 · 初始化 & 基本概念 · 原目录：Webpack › 官方指南学习 › 初始化 & 基本概念

参考链接：

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

起步

不使用 webpack

配套代码使用官方的例子，首先创建目录，使用命令初始化 npm，然后在本地安装 webpack 和命令行工具 webpack-cli

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

项目目录结构

webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  const element = document.createElement('div');
  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

可以看到 index.html 中通过链接引入了lodash，而 index.js 中需要通过全局变量 '_' 调用 lodash —— <script> 之间产生了依赖关系：在 index.js 文件执行之前，还需要在页面中先引入 lodash，因为 index.js 并未显式声明它需要 lodash，只是假定推测已经存在一个全局变量 _

这样做有以下的问题

无法直接体现脚本执行的依赖关系
如果依赖不存在，或引入顺序错误，则 index.js 执行出错
如果依赖被引入但是并没有使用，浏览器将下载冗余代码

创建 bundle

bundle：捆，包，扎;

修改目录结构，创建(./dist)文件夹用于存放分发代码，源代码(./src)文件夹仍存放源代码。源代码是指用于书写和编辑的代码。分发代码是指在构建过程中，经过最小化和优化后产生的输出结果，最终将在浏览器中加载

webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
    |- /src
    |- index.js

接下来在本地按照 lodash：npm install –save lodash，之后在 index.js 中 import

import _ from "lodash";

function component() {
  const element = document.createElement("div");
  element.innerHTML = _.join(["Hello", "webpack"], " ");

  return element;
}

document.body.appendChild(component());

在 index.html 中修改 <script>，使用 main.js 引入 bundle

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>起步</title>-    <script src="https://unpkg.com/lodash@4.17.20"></script>   </head>   <body>-    <script src="./src/index.js"></script>+    <script src="main.js"></script>   </body> </html>

使用命令 npx webpack

这部操作会将脚本 src/index.js 作为入口起点(entry points)，在 dist 目录下生成 main.js 作为输出(output)，此时运行 dist 下的 index.html，可以显示 Hello webpack

webpack.config.js

webpack.config.js 是 webpack 的配置文件，当存在配置文件时， webpack 命令将默认选择使用。配置文件比命令行方式更高效灵活

使用时在项目根路径下创建 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

npm 脚本

使用 CLI 运行本地的 webpack 副本并不方便，可以设置一个快捷方式：修改 package.json，添加一个 npm script。之后可以使用 npm run build 替代 npx 命令

 {
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "test": "echo \"Error: no test specified\" && exit 1",
+   "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.15.0",
    "webpack-cli": "^4.3.1"
  },
  "dependencies": {
    "lodash": "^4.17.20"
  }
}

基本概念

完成上面的入门后再了解 webpack 的基本概念更为直观，因此把基本概念放在后面

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块作为构建内部依赖图(dependency graph)的开始
进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
默认值是 ./src/index.js，但可以通过配置文件中的 entry 属性，来指定一个（或多个）不同的入口起点

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件
主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中
可以通过在配置中指定 output 字段，来配置这些处理过程模式(mode)

模式(mode)

通过选择 development, production 或 none 之一设置 mode 参数，可以启用 webpack 内置在相应环境下的优化。默认值 production。通常在生产环境模式下，webpack 会自动对代码进行压缩等优化。

起步#

不使用 webpack#

创建 bundle#

webpack.config.js#

npm 脚本#

基本概念#

入口(entry)#

输出(output)#

模式(mode)#

起步