WebPack 起步
发布时间：2023-05-06 13:28:50 所属栏目：教程 来源：
导读：webpack 用于编译 JavaScript 模块。一旦完成安装，你就可以通过 webpack 的 CLI 或 API 与其配合交互。如果你还不熟悉 webpack，请阅读核心概念和打包器对比，了解为什么你要使用 webpack，而不是社区中的其他工具。
|
webpack 用于编译 JavaScript 模块。一旦完成安装，你就可以通过 webpack 的 CLI 或 API 与其配合交互。如果你还不熟悉 webpack，请阅读核心概念和打包器对比，了解为什么你要使用 webpack，而不是社区中的其他工具。 基本安装 首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）： mkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev 贯穿整个指南的是，我们将使用 diff 块，来显示我们对目录、文件和代码所做的更改。 现在我们将创建以下目录结构、文件和内容： project webpack-demo |- package.json + |- index.html + |- /src + |- index.js src/index.js function component() { var element = document.createElement('div'); // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的 element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component()); index.html <!doctype html> <html> <head> <title>WebPack起步 F2er.com</title> <script src="https://unpkg.com/lodash@4.16.6"></script> </head> <body> <script src="./src/index.js"></script> </body> </html> 我们还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。 如果你想要了解 package.json 内在机制的更多信息，我们推荐阅读 npm 文档。 package.json { "name": "webpack-demo", "version": "1.0.0", "description": "", + "private": true, - "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9" }, "dependencies": {} } 在此示例中，<script> 标签之间存在隐式依赖关系。index.js 文件执行之前，还依赖于页面中引入的 lodash。之所以说是隐式的是因为 index.js 并未显式声明需要引入 lodash，只是假定推测已经存在一个全局变量 _。 使用这种方式去管理 JavaScript 项目会有一些问题： 无法立即体现，脚本的执行依赖于外部扩展库(external library)。 如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。 如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。 让我们使用 webpack 来管理这些脚本。 创建一个 bundle 文件 首先，我们稍微调整下目录结构，将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来。“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载： project webpack-demo |- package.json + |- /dist + |- index.html - |- index.html |- /src |- index.js 要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library： npm install --save lodash 在安装一个要打包到生产环境的安装包时，你应该使用 npm install --save，如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev。请在 npm 文档 中查找更多信息。 现在，在我们的脚本中 import lodash： src/index.js + import _ from 'lodash'; + function component() { var element = document.createElement('div'); - // Lodash, currently included via a script, is required for this line to work + // Lodash, Now imported by this script 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> <title>WebPack起步 F2er.com</title> - <script src="https://unpkg.com/lodash@4.16.6"></script> </head> <body> - <script src="./src/index.js"></script> + <script src="main.js"></script> </body> </html> 在这个设置中，index.js 显式要求引入的 lodash 必须存在，然后将它绑定为 _（没有全局作用域污染）。通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的，会以正确顺序执行的 bundle。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
