专栏首页京程一灯Webpack快速上手指南

Webpack快速上手指南

Webpack用于编译JavaScript模块。安装以后,可以通过CLI或API使用它。如果你对webpack还有点陌生,可以先看看它的核心概念以及一些比较,了解为什么要使用它。

基本的设置

首先,要创建一个目录,使用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

src/index.js

function component() {
  var element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

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更合理地管理脚本。

创建打包文件

首先,稍微改一改目录结构,把源代码(/src)从“分发”(distribution)代码(/dist)中分离出来。所谓源代码,就是我们要编写的代码。而分发代码则是通过构建压缩和优化后的输出,也就是最终要由浏览器加载执行的代码。

项目目录

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

要把依赖的lodash打包到index.js,需要本地安装这个库:

npm install --save 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。先删掉引用lodash<script>`标签,再修改另一个`<script>标签,把引用/src中的源文件改成引用打包文件:

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就可以利用该信息构建一张依赖关系图。然后再根据这张图生成优化的打包文件,而且确保代码的执行顺序。

明白这些后,我们运行webpack,把源脚本作为“入口”,把bundle.js作为输出:

./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。

ES2015模块

虽然很多浏览器尚未支持importexport语句,但webpack支持。因为webpack会在后台对它们进行编译,从而保证所有浏览器都可以运行打包文件。看看生成的dist/bundle.js,你会发现webpack都干了什么,很巧妙!

注意,webpack除了importexport语句,什么也不会动。如果你还在源代码里使用了其他ES2015语法,那必须要使用Babel或Bublé等编译器来编译。要了解webpack支持的各种模块语言,请参考Module API。

使用配置文件

多数项目都比前面的示例复杂,因此webpack支持配置文件。配置文件比在终端命令行输入一堆命令更有效率,下面我就看一看怎么用配置文件替代上面使用CLI选项:

项目目录

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

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]

如果webpack.config.js存在,webpack默认会使用它。这里使用了--config选项,是为了告诉你可以像这样指定任意名称的配置文件。对于复杂的需要分成多个文件的配置,这个选项就有用了。

配置文件其实远比简单地替代CLI输入灵活。比如可以在配置文件中指定加载器规则、指定插件、解析选项,还有实现其他操作。请参考配置文件了解更多信息。

NPM脚本

显然,像前面那样在CLI中运行本地安装的webpack有点麻烦,那就想办法简化一下在package.json中添加如下npm脚本:

package.json

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

这样,只要运行npm run build就相当于运行前面那一大串命令了。看到没,在scripts中,可以直接引用本地安装的npm包(webpack),而无需写出这个包的完整相对路径。这种便利特性是大多数npm项目的标准实现,因此我们可以直接引用webpack,而不用写./node_modules/.bin/webpack

好,下面就运行在npm脚本中定义的这个命令试试吧:

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]

npm run build后面加两个短线作为分隔,可以给webpack传入自定义参数,比如:npm run build -- --colors

小结

学会了基本的构建技能,下一步就该晋级学习Asset Management了,其中包括如何使用webpack管理图片和字体等资源。此时此刻,你的项目结构应该是这个样子的:

项目目录

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

如果你使用npm 5,那这个目录里还会有一个package-lock.json文件。

想了解webpack的设计思想?移步到基本概念和配置页面。此外,API详细介绍了webpack提供的各种接口。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一小时内搭建一个全栈Web应用框架

    把想法变为现实的能力是空想家与实干家的区别。不管你是在一家跨国公司工作,还是正在为自己的创业公司而努力,那些有能力将创意转化为真正产品的人,都具有宝贵的技能并拥...

    疯狂的技术宅
  • 用 Node.js 实现定时任务[每日前端夜话0xFE]

    在本文中,我们将研究如何在 Node 程序中创建和使用 Cron 作业。为此我们将创建一个简单的程序,该应用程序会自动从服务器中删除自动生成的 error.lo...

    疯狂的技术宅
  • 用 TypeScript 开发 Node.js 程序[每日前端夜话0x5E]

    翻译:疯狂的技术宅 原文:https://medium.com/@freek_mencke/how-to-write-node-js-applications-...

    疯狂的技术宅
  • 前端工程化(二)---webpack配置

    用户2193479
  • Webpack(一):安装和基础配置

    之前急着搭建博客,所以 Nodejs 安装好后就没管了,今天 webpack -v 命令死活用不了(提示“webpack 不是内部命令”),才发现是因为当时忘记...

    Chor
  • 玩转Spring中强大的spel表达式!

    Spring表达式语言全称为“Spring Expression Language”,缩写为“SpEL”,类似于Struts2x中使用的OGNL表达式语言,能在...

    路人甲Java
  • 【第8期】webpack入门学习手记(二)

    最近开始想要维护一个个人的公众号,初心是为了督促自己坚持做笔记,将学习的东西整理记录下来。更进一步的要求是提升动手能力、文章写作能力,和分享经验。终极目标就是为...

    siberiawolf
  • 【免费视频教程】webpack原理与实践【1】webpack预备知识

    打包工具帮你获得一些准备用于部署的js和css等,把它们转化为适合浏览器的可用的格式。

    web前端教室
  • (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧。

    wfaceboss
  • Vue+ElementUI项目使用webpack输出MPA

    为另一个项目提供可嵌入的功能单页,大部分页面使用时都是独立功能页,个别页面带有左侧边栏(相当于3-4个页面的整合形态),由于资源定位地址的限定,每个页面打包为单...

    大史不说话

扫码关注云+社区

领取腾讯云代金券