webpack指南 - 初探

来源:http://www.chinese-glasses.com 作者:Web前端 人气:100 发布时间:2020-03-24
摘要:可在 .dojorc中添加其它配置选项。这些选项通常通过命令行扩展可用的设置,并支持更高级的功能,如国际化、代码拆分、PWA清单和忽略代码等。.dojorc 文件中包含一个 JSON 对象,可以为

可在 .dojorc 中添加其它配置选项。这些选项通常通过命令行扩展可用的设置,并支持更高级的功能,如国际化、代码拆分、PWA 清单和忽略代码等。.dojorc 文件中包含一个 JSON 对象,可以为能在 dojo 命令行工具上运行的任何命令配置信息。在配置对象中为每个命令分配一个节点,可在其中存储配置信息。

webpack.config.js

var path = require('path');

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

现在让我们使用配置文件再一次运行配置文件

./node_modules/.bin/webpack --config webpack.config.js

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]
If a webpack.config.js is present, the webpack

如果 webpack.config.js 是存在的,webpack命令行工具会使用它作为默认配置文件,如果我们使用--config选项,我们可以通过文件名称任意指定一个配置文件。这对于一个配置项复杂到需要拆分的项目来说,是十分有用的。

配置文件比起命令行支持更加灵活的的功能。我们可以指定特定的加载规则,插件,解析选项和其它增强功能。参考配置文件文档去了解更多相关信息。

Dojo 的 CLI 工具支持多种构建目标或 mode。在 dojo create app 为 package.json 生成的几个脚本(scripts)中可看到所有模式。

NPM 脚本

鉴于在命令行中运行 webpack 的命令比较长,我们可以使用一些简单快捷方式。我们现在可以在package.json文件中添加如下 npm 脚本。

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

现在我们只需要使用npm run build命令就可以替代冗长的 webpack 命令。添加这些在script中,我们可以通过名称引用本地已经安装的包,而不是写出完整的路径。这个方法允许我们直接使用webpack而不是使用node_modules/webpack/bin/webpack.js,并且它已经成为大多数基于 npm 的项目用来简化 webpack 命令的标准。

现在让我们来允许如下命令,你将会看到如下结果

npm run build

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]

Dojo 提供了一套强大的命令行工具,让构建现代应用程序更加简单。

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());

现在,因为我们将捆绑我们的 script,我们需要更新我们的index.html文件。让我们移除 lodash 的 <script>,现在我们import它,然后修改其它<script>去加载这个绑定,用于替代原始的/src文件。如下

Dojo 配置

使用配置项

因为大部分项目都会需要一个更为复杂的步骤,所以 webpack 支持一个 配置文件。比起使用在终端中使用大量的命令行,使用配置文件是一个更为高效的方式,所以现在让我创建一个去替代终端命令。首先我们修改项目结构

运行以下命令,创建一个为生产环境优化过的构建。

project

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

运行服务和监听变化

开始

可能你已经知道 webpack 被用来编译 JavaScript 的 modules(模块),一旦安装成功,你便能以 CLI 或者 API 的形式使用 webpack。如果你是一名 webpack 的新手,那么建议先读 核心概念 以及 竞品对比 去学习为什么你会用 webpack,而不是其它被社区淘汰的竞品。

构建

project

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

为了能在index.js中捆绑lodash,我们需要现在本地安装对应的库,方法如下

npm install --save lodash

然后将其在我们的 script (脚本)中引入

Dojo CLI模块化的命令行工具,用于快速启动新的应用程序、创建部件和运行测试等。开发服务器开发时使用的本地 web 服务器,用于监听文件系统,当检测到变化时会自动重新构建。也支持 HTTPS 和设置代理。包(bundle)通过减少用户需要下载的内容和优化用户实际需要的应用程序交互时间(Time-to-Interactive)以提高用户体验。可以根据路由自动创建包,或者在配置文件中明确定义包。按条件纳入代码通过.dojorc配置文件可以静态方式关闭或打开使用 dojo/has 定义的功能。由于这些配置而无法访问到的代码分支会被自动忽略掉。这就很容易为特定目标(如 IE11 或 mobile)提供特定功能,而不会影响包的大小。PWA 支持渐进式 Web 应用程序通过缓存内容甚至脱机工作,创建更快、更可靠的用户体验。通过配置文件或者在代码中定义,dojo 很容易创建一个 service work,并将其构建为应用程序的一部分。构建时渲染在构建时渲染路由以生成初始的 HTML 和 CSS。在构建时渲染,Dojo 可以节省出初始渲染的成本,创建出一个响应性更高的应用程序,且不会引入额外的复杂性。基本用法

index.html

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

在这个例子里,存在隐式的依赖通过 <script> 标签,我们的 index.js 文件依赖的 lodash 在运行之前就已经被包含在页面之中。 这是因为 index.js 从未声明需要 lodash ,它假设在它使用的时候,刚刚好有一个全局变量 _ 是存在的。

这样管理 JavaScript 项目存在着如下几个问题

  • 没有对外部库做显示的依赖声明
  • 如果依赖缺失,或者引入了错误的顺序,那么应用程序将无法正确执行
  • 如果一个依赖被包含,但是没有被使用,但是浏览器还是会强制地下载没有必要的代码片段。

好的,现在让我们使用 webpack 来管理这些问题。

 dojo build --mode dev --watch file --serve

ES2015 模块

尽管importexport表达式还不能被大多数浏览器所支持,webpack 依旧支持它们。其中的原理在于,webpack 实际上转换这些代码以便老的浏览器依旧可以运行他们。如果你阅读dist/bundle.js文件,你可以看到 webpack 如何处理它们,那是非常精巧的。

支持的浏览器

当在 dev 或 dist 模式下运行时,可以使用 --serve 标记启动一个 web 服务器。应用程序默认运行在 9999 端口上。可以使用 --port 标记修改端口。使用 --watch 标记,Dojo 的构建工具也可以监听应用程序的变化并自动重新构建。生成的 package.json 文件中包含 dev 脚本,它使用这些标记运行应用程序的构建版本,并监听到磁盘上的文件发生变化后会自动重新构建。

dist/index.html

  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="bundle.js"></script>
   </body>
  </html>

在这个步骤,index.js显示的加载了lodash在当前环境,然后指定其为_ (这里没有全局代码污染)。通过描述一个模块需要的依赖,webpack 可以使用这些信息去构建一个依赖图。然后使用这个依赖图去生成一个优化后的捆(bundle,后续使用 bundle 直接称呼 webpack 打包生成的捆),在这个 bundle 中脚本将被会以正确的顺序执行。

根据上述的说明,我们现在将我们的脚本作为入口接口,将bunlde.js作为输出来运行webpack。具体的执行命令如下

./node_modules/.bin/webpack src/index.js dist/bundle.js

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]

你的输出可能会有上述会有一点不同,但只要构建成功都是可以正常执行的。

打开index.html文件在你的浏览器中,如果一切正常的话,你会看见如下文本:'Hello webpack'。

Dojo 提供了一组 CLI 命令,辅助创建和构建应用程序。本指南假设已全局安装 @dojo/cli,且在项目中安装了 @dojo/cli-build-app 和 @dojo/cli-test-intern。如果项目是使用 @dojo/cli-create-app 初始化的,那么这些依赖应该已经存在。

project

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

Dojo 使用 Intern 运行单元和功能测试。T运行 tests/unit 中单元测试的最快方式,是使用新建 Dojo 应用程序时创建的 NPM 脚本。

创建一个捆绑

首先我们要对目录做一些微调,从分发代码 /dist 中拆分源码 /src . "source" 文件夹中保存我们编辑的代码,"distribution" 文件中存放经过构建器处理过后最小化和优化过的output,他们将最终被浏览器所加载。

# execute unit testsnpm run test:unit# execute functional tests locally using headless Chrome and Seleniumnpm run test:functional

基础安装

首先我们创建一个文件夹,并且用 npm 初始化,然后在本地安装 webpack:

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

现在我们将创建如下的文件目录结果

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

本文由10bet发布于Web前端,转载请注明出处:webpack指南 - 初探

关键词:

上一篇:没有了

下一篇:没有了

频道精选

最火资讯