Webpack入门教程

2018/3/9 12:55:01 人评论 次浏览 分类:HTML

转自Kindem的博客

什么是Webpack

Webpack是一个模块打包器,它的主要目标是将JavaScript文件打包在一起,打包后的文件用于在浏览器中使用。 ----Webpack中文文档

说白了,它最大的用处就是分析一个网页的各种依赖,并且自动化地将这些依赖打包在一起并且压缩,供网页使用。当然它的功能不止如此,比如依赖loader,它还可以将JavaScript ES6(很多老浏览器不一定支持)转换成支持更加多浏览器的老版本JavaScript。

Webpack示意图

总之,它在前端的模块化开发中占有重要的作用,如果想让自己的项目变得更加整洁,开发更加有效率,Webpack有必要一学。

在开始之前

在介绍Webpack之前,很有必要先介绍一下Node.js和npm,如果你已经对着两者有着深刻的了解,可以直接跳过,看下一节,如果你之前从未听说过Node.js,可以仔细看看这一节对这两者的介绍,Webpack的使用一定程度上依赖着这两者。

Node.js是一个基于Chrome V8引擎驱动的JavaScript运行时。Node.js使用高效、轻量级的事件驱动、非阻塞I/O模型。它的包生态系统,npm,是目前世界上最大的开源库生态系统。 ----Node.js官网

看了是不是感觉Node.js官网的介绍,感觉这玩意十分高深莫测,说实话我第一次看到的时候也没有太看懂。接下来用人话给大家翻译一下,众所周知,JavaScript是Web开发中不可或缺的语言,它可以为网页添加许多动态效果,也能为网页添加更多可能性,如果连JavaScript都不知道,请先学习一下Web开发御三家(html, css, js),但是JavaScript的硬伤是只能在浏览器上运行,脱离浏览器,就无法运行。而Node.js就解决了这么一个问题,它将Chrome V8的JavaScript引擎提取出来,使得JavaScript能够脱离浏览器而运行,这样就为JavaScript提供了无限的可能性。至于它的更多,现在先不用了解那么深,对于Node.js,你现在只需要了解到这里就行了。

而npm,则是Node.js自带的包管理系统,npm的作用跟python的pip很像,你只需要敲一行命令,就能获取到世界上任何一个角落的人发布在其上的源码并且使用。显然,JavaScript开发模块化,npm也在其中做出了很大贡献。

接下来,先安装Node.js吧,打开Node.js的官网Node.js

Node.js官网

简单粗暴的页面,你可以选择稳定版LTS和最新版Current下载,自行安装即可。当安装完成后,你可以在命令行输入

node -v

如果正确显示了Node.js的版本号,就说明你的Node.js成功安装了,当然,npm是Node.js的一部分,Node.js安装成功的同时,npm也就可以使用了。

开始学习Webpack

如果你还没有安装Node.js,请移步上一节并认真安装好Node.js,如果你已经安装了Node.js,就可以开始学习Webpack了。

首先,先建立一个文件夹,用来作为学习Webpack的项目文件夹,文件夹名随意,接着在项目使用命令行中初始化npm

npm init

运行该命令会询问你你这一个项目的基本信息,比如项目名、作者、描述、Git仓库等等,这是因为init指令实际上是将项目文件夹变成一个npm包,你甚至在日后可以将这个npm包发布给他人使用,当然,我们现在只是学习,一路回车就行,如果你实在比较较真,也没关系,这些东西日后可以在配置文件中修改。如果你不想敲回车,也可以直接使用

npm init -y

当npm初始化完成之后,项目下会自动生成一个package.json文件,上面详细说明了你这一个npm包中的信息,我们暂时可以不用关注这些内容。接下来在项目中安装Webpack。

npm install --save-dev webpack
npm install --save-dev webpack-cli

这两行命令会为你的项目安装webpack和webpack-cli包,前者是webpack的核心库,后者是分离出来的webpack命令行功能,我们需要使用webpack-cli来进行项目的打包等操作。

不使用Webpack时,项目的问题

我们先看一下不使用webpack进行构建时,项目的缺陷。

先在项目文件夹中创建几个目录和文件,项目结构如下图所示,前面带加号的是需要你自己创建的文件和目录:

  webpack-learning
  |- 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>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

这里的Lodash是一个JavaScript库,这里引用的意味就是给大家展示一下我们平时使用第三方JavaScript库的做法,这样的做法会产生很多问题,因为通过index.html的联系,很明显,index.js对第三方库lodash产生了隐形依赖,之所以说是隐形依赖,是因为在lodash被引用之前,index.js中的双下划线变量(lodash提供的一个变量)还是未知的,只有在lodash被引用之后,这个变量才能发挥作用,显而易见,这样做的很危险的,这样会产生很多问题:

  • 无法立即体现,脚本的执行依赖于外部扩展库(external library)。
  • 如果依赖不存在,或者引入顺序错误,应用程序将无法正常运行。
  • 如果依赖被引入但是并没有使用,浏览器将被迫下载无用代码。

Webpack的价值就这样体现出来了,当你的项目中引用的JavaScript文件,html页面越来越多,就会出现一些不可避免的依赖问题,而我们通过Webpack可以解决这一问题,对于一个html页面,我们可以该页面依赖的所有JavaScript文件打包在一起,构成一个JavaScript文件,这样,html页面只需要引用这一个JavaScript文件即可,上面说的问题,就可以完全被避免。当然自己打包也是可以的,不过通过Webpack这一神器,就没那么麻烦了,你只要告诉它,你需要把哪些文件打包,输出到哪里,它就可以自动分析所有JavaScript的依赖关系,然后帮你打包成一个文件。

接下来,我们就来打包一次试试。

使用Webpack打包

在打包之前,我们还需要做一点小小的调整----将开发环境和生产环境分开:

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

这样一来,src文件夹里面,放的就是我们开发的环境,所有的代码编写都在这里进行,而相对稳定的html文件就直接放入dist文件夹中,作为生产环境的文件,这样有一个好处,每一次更新src之后,只需要把src中的东西重新打包,然后供生产环境中的html文件使用,就行了,而html文件本身,几乎不用被更改。

因为我们用到了lodash包,所以需要在npm中安装lodash依赖:

npm install --save lodash

细心的朋友可能注意到,这里使用的是--save而不是--save-dev,两者的区别是,--save是生产环境的依赖,也就是供给用户使用的依赖,而--save-dev是开发环境的依赖,比如Webpack,在代码完成并且打包之后,就不需要再使用到它了,显然用户是无需接触到Webpack的,所以这里Webpack属于开发环境的依赖。

添加lodash依赖之后,我们就可以在js文件中导入并且使用了:

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

因为接下来我们要使用Webpack打包所有的js,这样的话,我们就不需要再自己在html引入JavaScript库了,而只需要引入打包之后的文件就行了,我们先约定以后打包的文件名叫做bundle.js,那么接下来,修改html文件:

dist/index.html

  <!doctype 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>

这样的话,我们就可以开始打包了。

在命令行输入

webpack-cli src/index.js --output dist/bundle.js

如果不行的话,尝试

// linux
node_modules/.bin/webpack-cli src/index.js --output dist/bundle.js
// windows
node_modules\.bin\webpack-cli src/index.js --output dist/bundle.js

这一行的意思是执行Webpack命令行程序,将src/index.js作为入口文件,自动分析index.js的依赖,并且将所有依赖和index.js本身一起打包成一个文件,输出到dist/bundle.js,执行这一行,可以看到Webpack打包成功的输出信息:

Hash: 61bf2519e9ef5fa0eb5e
Version: webpack 4.1.0
Time: 4080ms
Built at: 2018-3-7 16:58:36
    Asset      Size  Chunks             Chunk Names
bundle.js  69.6 KiB       0  [emitted]  main
Entrypoint main = bundle.js
   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] ./src/index.js 231 bytes {0} [built]
    + 1 hidden module

打包成功并且输出之后,你就可以打开html文件看看结果了:


html运行结果

可见打包之后的JavaScript能够成功运行,并且解决了之前说的几个问题,这就是Webpack的主要功能。

但是你可能会问,每次都要自己输入巴拉巴拉一大串命令,那也太麻烦了吧,Webpack显然想到了这一点,它是支持配置文件的,你只需要在项目根目录下新建一个配置文件webpack.config.js,并且按照Webpack中文文档给出的语法进行编写就行了。下面给出一个配置文件的例子:

webpack.config.js

const path = require('path');

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

完成配置文件之后,你需要打包时,就不需要再自己输入入口和输出了,直接这样就行了

webpack-cli
// 如果不行尝试
// linux
node_modules/.bin/webpack-cli
// windows
node_modules\.bin\webpack-cli

NPM脚本

有了配置文件你可以还不满足,我既然有npm,为什么不能直接让npm帮我运行呢,答案是可以的,npm支持用户自定义脚本,用户可以在npm的配置文件中添加自己的脚本内容,然后使用下面给出的指令来运行用户的脚本

npm run 脚本名

这样的话,我们不是可以自己定义一个build脚本,让它完成Webpack打包的任务呢。

package.json

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

这样一来,只要

npm run build

世界我有,打包全自动!

关于Webpack的更多

Webpack的功能当然还不止这些,这里只介绍Webpack的基本功能打包,当你阅读完这篇文章,对Webpack是什么,怎么用也知道个ABCD了,如果想了解更多,可以关注我,我会给大家继续更新一下Web前端的知识,当然也可以直接上Webpack中文文档上查更多的东西,把自己的项目变得更加自动化,让开发更加有效率。

分享到: 腾讯 新浪 人人网 邮件 收藏夹 复制网址 更多

上一篇:Canvas制作旋转的太极

下一篇:编写灵活、稳定、高质量的CSS代码的规范

相关知识


共有访客发表了评论 网友评论

验证码: 看不清楚?