一. 摘要
webpack5功能：
1.打包：将不同类型的资源按模块处理进行打包
2.静态：打包后最终产出静态资源
3.模块：webpack支持不同规范的模块化开发
二. 安装webpack
如果你使用 webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI。
不推荐 全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中， 可能会导致构建失败。
首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：
mkdir webpack-five-demo cd webpack-five-demo npm init -y npm install webpack webpack-cli --save-dev
现在，我们将创建以下目录结构、文件和内容：同级目录下创建src文件夹及index.html文件和src文件夹下的index.js文件。
三. 快速上手
3.1 下面我们在相应的文件中写一些东西，进行测试。
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>
我们还需要调整 package.json 文件，以便确保我们安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码。
package.json
{ "name": "webpack-five-demo", "version": "1.0.0", "description": "", - "main": "index.js", + "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^5.65.0", "webpack-cli": "^4.9.1" } }
3.2 创建一个 bundle
首先，我们稍微调整下目录结构，创建分发代码(./dist)文件夹用于存放分发代码，源代码(./src)文件夹仍存放源代码。源代码是指用于书写和编辑的代码。分发代码是指在构建过程中，经过最小化和优化后产生的输出结果，最终将在浏览器中加载。调整后目录结构如下：
webpack-five-demo |- package.json |- package-lock.json + |- /dist + |- index.html - |- index.html |- /src |- index.js
你可能会发现，尽管 index.html 目前放在 dist 目录下，但它是手动创建的。在指南的后续章节中，我们会教你如何生成 index.html 而非手动编辑它。如此做，便可安全地清空 dist 目录并重新生成目录中的所有文件。
要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：
npm install --save lodash
在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 npm install --save。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用 npm install --save-dev。
现在，在我们的 script 中 import lodash：
src/index.js
+ import _ from 'lodash'; function component() { const element = document.createElement('div'); - // lodash（目前通过一个 script 引入）对于执行这一行是必需的 + // lodash 在当前 script 中使用 import 引入 element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
现在，我们将会打包所有脚本，我们必须更新 index.html 文件。由于现在是通过 import 引入 lodash，所以要将 lodash <script> 删除，然后修改另一个 <script> 标签来加载 bundle，而不是原始的 ./src 文件：
dist/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> + <script src="main.js"></script> </body> </html>
在这个设置中，index.js 显式要求引入的 lodash 必须存在，然后将它绑定为 _（没有全局作用域污染）。通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的 bundle，并且会以正确顺序执行。
可以这样说，执行 npx webpack，会将我们的脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出。Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即 ./node_modules/.bin/webpack）：
输出可能会稍有不同，但是只要构建成功，那么你就可以放心继续。
在浏览器中打开 dist 目录下的 index.html，如果一切正常，你应该能看到以下文本：'Hello webpack'。
4280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
