-
WebPack 开发 Vagrant
所属栏目：[教程] 日期：2023-05-08 热度：1375
如果你在开发一个更高级的项目，并且使用 Vagrant 来实现在虚拟机(Virtual Machine)上运行你的开发环境(development environment)，那么你或许需要在虚拟机上运行 webpack。
首先，确保 Vagrantfile 拥有一个固定[详细] -
WebPack 内容安全策略
所属栏目：[教程] 日期：2023-05-08 热度：2748
webpack 能够为其加载的所有脚本添加 nonce。要启用此功能，需要在引入的入口脚本中设置一个 __webpack_nonce__ 变量。应该为每个唯一的页面视图生成和提供一个唯一的基于 hash 的 nonce，这就是为什么 __webpack_no[详细]
-
WebPack 构建性能
所属栏目：[教程] 日期：2023-05-08 热度：3546
无论你正在 development 或构建 production，以下做法应该帮助到你达到最佳。
保持版本最新
使用最新的 webpack 版本。我们会经常进行性能优化。 webpack 的最新稳定版本是：
WebPack 构建性能
保持最新[详细] -
WebPack 使用环境变量
所属栏目：[教程] 日期：2023-05-08 热度：5096
要在开发和生产构建之间，消除 webpack.config.js 的差异，你可能需要环境变量。
webpack 命令行环境配置中，通过设置 --env 可以使你根据需要，传入尽可能多的环境变量。在 webpack.config.js 文件中可以访问到这[详细] -
WebPack 迁移到新版本
所属栏目：[教程] 日期：2023-05-08 热度：1287
以下各节描述从 webpack 1 到 webpack 2 的重大变化。
webpack 从 1 到 2 的变化，比从 2 到 3 要少很多，所以版本迁移起来难度应该不大。
随着 webpack 2 版本已经发布一段时间，此章节的内容可能会在不久的将[详细] -
WebPack TypeScript 详解
所属栏目：[教程] 日期：2023-05-06 热度：9432
TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通的 JavaScript 代码。这篇指南里我们将会学习 webpack 是如何跟 TypeScript 进行集成。
基础安装
首先，执行以下命令，安装 TypeScript [详细] -
NPM Scripts
所属栏目：[教程] 日期：2023-05-06 热度：6897
通常 webpack 用户使用 npm scripts 来作为任务执行器。这是比较好的开始。然而跨平台支持是一个问题，为此有一些解决方案。许多用户，但不是大多数用户，直接使用 npm scripts 和各种级别的 webpack 配置和工具，来[详细]
-
WebPack 集成
所属栏目：[教程] 日期：2023-05-06 热度：6635
首先我们要消除一个常见的误解。webpack 是一个模块打包器(module bundler)（例如，Browserify 或 Brunch）。它不是一个任务执行器(task runner)（例如，Make, Grunt 或者 Gulp ）。任务执行器就是用来自动化处理常见[详细]
-
设定 HtmlWebpackPlugin
所属栏目：[教程] 日期：2023-05-06 热度：1835
首先安装插件，并且调整 webpack.config.js 文件：
npm install --save-dev html-webpack-plugin
webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('ht[详细] -
WebPack 管理输出
所属栏目：[教程] 日期：2023-05-06 热度：6318
到目前为止，我们在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过[详细]
-
WebPack 开发
所属栏目：[教程] 日期：2023-05-06 热度：9235
如果你一直跟随之前的指南，应该对一些 webpack 基础知识有着很扎实的理解。在我们继续之前，先来看看如何建立一个开发环境，使我们的开发变得更容易一些。
使用 Source Map
当 webpack 打包源代码时，可能会很[详细] -
WebPack 模块热替换
所属栏目：[教程] 日期：2023-05-06 热度：6685
模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。本页面重点介绍实现，而概念页面提供了更多关于它的工作原理以及为什么它有用的细[详细]
-
WebPack Tree Shaking 教程
所属栏目：[教程] 日期：2023-05-06 热度：762
在我们的项目中添加一个新的通用模块文件 src/math.js，此文件导出两个函数：
project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- ind[详细] -
WebPack 生产环境构建
所属栏目：[教程] 日期：2023-05-06 热度：7136
开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost serv[详细]
-
WebPack 代码分离
所属栏目：[教程] 日期：2023-05-06 热度：7663
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影[详细]
-
WebPack 懒加载
所属栏目：[教程] 日期：2023-05-06 热度：778
懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加[详细]
-
WebPack 创建一个 library
所属栏目：[教程] 日期：2023-05-06 热度：9447
除了打包应用程序代码，webpack 还可以用于打包 JavaScript library。以下指南适用于希望流水线化(streamline)打包策略的 library 作者。
创建一个 library
假设你正在编写一个名为 webpack-numbers 的小的 li[详细] -
WebPack shimming 全局变量
所属栏目：[教程] 日期：2023-05-06 热度：1388
webpack 编译器(compiler)能够识别遵循 ES2015 模块语法、Commonjs 或 AMD 规范编写的模块。然而，一些第三方的库(library)可能会引用一些全局依赖（例如 jQuery 中的 $）。这些库也可能创建一些需要被导出的全局变量[详细]
-
WebPack 渐进式网络应用程序
所属栏目：[教程] 日期：2023-05-06 热度：9075
渐进式网络应用程序(Progressive Web Application - PWA)，是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。PWA 可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运[详细]
-
WebPack 缓存
所属栏目：[教程] 日期：2023-05-06 热度：7921
我们使用 webpack 来打包我们的模块化后的应用程序，webpack 会生成一个可部署的 /dist 目录，然后把打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到服务器上，客户端（通常是浏览器）就能够访问网站此服[详细]
-
WebPack 管理资源
所属栏目：[教程] 日期：2023-05-06 热度：9834
如果你是从开始一直遵循着指南的示例，现在会有一个小项目，显示 "Hello webpack"。现在我们尝试整合一些其他资源，比如图像，看看 webpack 如何处理。
在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等[详细] -
WebPack 起步
所属栏目：[教程] 日期：2023-05-06 热度：3175
webpack 用于编译 JavaScript 模块。一旦完成安装，你就可以通过 webpack 的 CLI 或 API 与其配合交互。如果你还不熟悉 webpack，请阅读核心概念和打包器对比，了解为什么你要使用 webpack，而不是社区中的其他工具。[详细]
-
WebPack 安装
所属栏目：[教程] 日期：2023-05-06 热度：3428
在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 pack[详细]
-
什么是 Webpack
所属栏目：[教程] 日期：2023-05-06 热度：2979
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
WebPack 和[详细] -
为什要使用 WebPack
所属栏目：[教程] 日期：2023-05-06 热度：6286
webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。
为什要使[详细]
