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

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

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：

目录结构如下：

$ 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 ` 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

> [email protected] test

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

  

Error: no test specified, now exiting...

$ npm run webpack


> [email protected] 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

> [email protected] 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

$

参考资料

• Webpack 入门教程
• Node.js 教程
• webpack配置之webpack.config.js文件配置
• 如何在npm中避免“没有指定测试”的错误？
• npm简介