Webpack入门

1、Webpack是什么

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。


image.png

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

2、Webpack使用

2.1 安装

需要先安装node.js,在MacOS命令行执行如下命令:

brew install node

说明:

Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。
Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。

安装完成node.js之后,就可以使用npm(应该是Node Package Management,node包管理工具)命令安装webpack:

sudo npm install webpack webpack-cli -g

安装完成之后,可以通过如下命令查看安装的信息:

$ npm list -g

/usr/local/lib

├── cnpm@8.3.0
├── corepack@0.12.1
├── create-react-app@5.0.1
├── npm@8.15.0
├── webpack-cli@4.10.0
└── webpack@5.74.0

ChengdeMBP:00_WebpackTrial chengxia$

2.2 入门

2.2.1 准备

新建一个webpackapp目录,在其中放入如下三个文件。
webpackapp/runoob1.js:

document.write(require("./runoob2.js"));

webpackapp/runoob2.js:

module.exports = "It works from runoob2.js.";

webpackapp/index.html:

<html>  
    <head>        <meta charset="utf-8">  
    </head>    <body>        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>  
    </body></html>

目录结构如下:

$ tree ../webpackapp/

../webpackapp/
├── index.html
├── runoob1.js
└── runoob2.js

0 directories, 3 files
$

2.2.2 打包

在前面的webpackapp目录执行如下命令:

$ webpack ./runoob1.js -o . --output-filename bundle.js

asset bundle.js 209 bytes [emitted] [minimized] (name: main)

./runoob1.js 41 bytes [built] [code generated]

./runoob2.js 46 bytes [built] [code generated]

  

WARNING in configuration

The 'mode' option has not been set, webpack will fallback to 'production' for this value.

Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

  

webpack 5.74.0 compiled with 1 warning in 278 ms

$ tree ../webpackapp/
../webpackapp/
├── bundle.js
├── index.html
├── runoob1.js
└── runoob2.js

0 directories, 4 files

$

可以看出,新生成了一个bundle.js文件,这个文件就是webpack打包runoob1.js生成的文件(实际上,是以runoob1.js为入口,将相关的所有依赖文件都打包到了bundle.js中)。
前面的index.html页面中,实际上引用的就是bundle.js。
在浏览器中预览打开index.html页面,效果如下图:


result.png

2.3 使用参数配置文件webpack.config.js

前面的打包参数写在webpack命令中有些麻烦,可以借助于配置文件。
在当前目录下新增配置文件webpack.config.js

const path = require('path');

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

这时候,直接执行webpack命令即可完成打包:

$ tree .

.
├── index.html
├── runoob1.js
├── runoob2.js
└── webpack.config.js

0 directories, 4 files

$ webpack

asset bundle.js 209 bytes [emitted] [minimized] (name: main)

./runoob1.js 41 bytes [built] [code generated]

./runoob2.js 46 bytes [built] [code generated]

  

WARNING in configuration

The 'mode' option has not been set, webpack will fallback to 'production' for this value.

Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

  

webpack 5.74.0 compiled with 1 warning in 260 ms

$ tree .

.
├── bundle.js
├── index.html
├── runoob1.js
├── runoob2.js
└── webpack.config.js

0 directories, 5 files

$

3、使用npm进行打包

3.1 npm简介

3.1.1 含义

npm,Node Package Manager的缩写,也就是“节点的包管理器”。顾名思义,npm是一个软件包管理器,主要进行JavaScript的包管理。通过npm,我们可以很方便地进行JavaScript包的下载、升级,我们也可以把我们开发的JavaScript包共享给其他使用者。
我们可以简单地把npm当成一个JavaScript语言的Maven,使用起来非常方便。

3.1.2 npm与Node.js的关系

如果你是一个初学者,你会发现:我们使用npm之前,必须安装Node.js;当我们安装完Node.js之后,我们几乎不使用Node.js,只使用其中的npm。npm和Node.js原本是没关系的。
最初,npm和Node.js是不同的作者开发的。也许,你会认为npm的第一个字母是Node,名字来源于Node.js;可是,Node.js最初的名字却是Web.js。npm在Node.js中提供,完全是市场因素。
npm开发出来后,它的作者Isaaz曾经联系过jQuery、Bootstrap的作者,希望他们提交自己的软件包给npm进行管理,但是jQuery、Bootstrap的作者不理睬。
于是Isaaz联系Node.js的作者,当时Node.js并不火,而且缺一个包管理器,二者一拍即合,并且Node.js愿意将npm集成进来,npm成为Node.js的一个组件。
从此,Node.js和npm相互扶持,让Node.js火遍全球,也让npm的用户不断增多,目前npm管理了60万个软件包,平均每天有上亿次下载,曾经对npm爱理不理的jQuery、Bootstrap也加入到了npm。

3.1.3 npm的组成

npm由三个独立的部分组成:

  • 网站:即npmjs官网,我们可以直接访问
  • 注册表(registry:是一个保存软件包的数据库
  • 命令行工具 (CLI):CLI是Command Line Interface的缩写,即命令行接口的缩写,一般通过CLI使用npm。

3.2 npm打包命令的使用入门

npm命令借助于package.json配置文件,同样可以完成打包。
首先执行npm init命令:

$ tree .

.
├── index.html
├── runoob1.js
├── runoob2.js
└── webpack.config.js

0 directories, 4 files

$ npm init

This utility will walk you through creating a package.json file.

It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields

and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and

save it as a dependency in the package.json file.

  

Press ^C at any time to quit.

package name: (webpackapp) 

version: (1.0.0) 

description: 

entry point: (runoob1.js) 

test command: 

git repository: 

keywords: 

author: 

license: (ISC) 

About to write to /xxxxxxxxx/webpackapp/package.json:

  

{

  "name": "webpackapp",

  "version": "1.0.0",

  "description": "",

  "main": "runoob1.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}

  

  

Is this OK? (yes) 

$ tree .

.
├── index.html
├── package.json
├── runoob1.js
├── runoob2.js
└── webpack.config.js

0 directories, 5 files

$

一路回车之后,会在当前目录下多一个package.json文件,修改其中的内容如下:

{
  "name": "webpackapp",
  "version": "1.0.0",
  "description": "",
  "main": "runoob1.js",
  "scripts": {
    "test": "echo \"Error: no test specified\", now exiting...",
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC"
}

注意,这里scripts中配置了两个命令:一个是test,默认就有的,这里去掉了最后的exit 1,不然会提示报错;另一个是webpack自定义的。
然后,可以调用这两个命令:

$ tree .

.
├── index.html
├── package.json
├── runoob1.js
├── runoob2.js
└── webpack.config.js

0 directories, 5 files

$ npm run test

> webpackapp@1.0.0 test

> echo "Error: no test specified", now exiting...

  

Error: no test specified, now exiting...

$ npm run webpack


> webpackapp@1.0.0 webpack

> webpack

  

asset bundle.js 209 bytes [emitted] [minimized] (name: main)

./runoob1.js 41 bytes [built] [code generated]

./runoob2.js 46 bytes [built] [code generated]

  

WARNING in configuration

The 'mode' option has not been set, webpack will fallback to 'production' for this value.

Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

  

webpack 5.74.0 compiled with 1 warning in 262 ms

$ tree .

.
├── bundle.js
├── index.html
├── package.json
├── runoob1.js
├── runoob2.js
└── webpack.config.js

0 directories, 6 files

$

可以看出,能够正常打包成功。
当然,也可以直接将package.json配置文件修改为如下:

{
  "name": "webpackapp",
  "version": "1.0.0",
  "description": "",
  "main": "runoob1.js",
  "scripts": {
    "test": "echo \"Error: no test specified\", now exiting...",
    "webpack": "webpack ./runoob1.js -o . --output-filename bundle.js"
  },
  "author": "",
  "license": "ISC"
}

这样,这个webpack.config.js配置文件就没用了。如下:

$ tree .

.
├── index.html
├── package.json
├── runoob1.js
└── runoob2.js

0 directories, 4 files

$ npm run webpack

> webpackapp@1.0.0 webpack

> webpack ./runoob1.js -o . --output-filename bundle.js

  

asset bundle.js 209 bytes [emitted] [minimized] (name: main)

./runoob1.js 41 bytes [built] [code generated]

./runoob2.js 46 bytes [built] [code generated]

  

WARNING in configuration

The 'mode' option has not been set, webpack will fallback to 'production' for this value.

Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

  

webpack 5.74.0 compiled with 1 warning in 260 ms

$ tree .

.
├── bundle.js
├── index.html
├── package.json
├── runoob1.js
└── runoob2.js
 

0 directories, 5 files

$

参考资料

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 225,208评论 6 524
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,502评论 3 405
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 172,496评论 0 370
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,176评论 1 302
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,185评论 6 401
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,630评论 1 316
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,992评论 3 431
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,973评论 0 280
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,510评论 1 325
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,546评论 3 347
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,659评论 1 355
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,250评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,990评论 3 340
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,421评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,569评论 1 277
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,238评论 3 382
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,732评论 2 366

推荐阅读更多精彩内容

  • 本来是想看看vue的入门,结果发现vue依赖于webpack,所以只好先来安装webpack,简单了解一下,emm...
    机智小铛铛i阅读 511评论 0 0
  • 2018年8月25日更新,目前 webpack 已经更新值 4.17.1 ,本文所用到的各种库或多或少有些过时,跟...
    AizawaSayo阅读 264评论 0 2
  • (一)欢迎了解webpack; (本文的内容大部分来自webpack的官方文档,写的目的是自己入门时候遇到的困惑,...
    sky_rainbow阅读 1,442评论 0 1
  • 2017年12月7日更新,添加了clean-webpack-plugin,babel-env-preset,添加本...
    ZombieBrandg阅读 1,164评论 0 19
  • 一个包含前端的项目,里面可能有多个.js,多个.css,多个静态图片,多个其他前端资源。一些js资源彼此之间存在依...
    手劲很大阅读 466评论 0 0