走进Webpack大门

最新推荐文章于 2022-08-06 19:58:04 发布

huxiy1995

最新推荐文章于 2022-08-06 19:58:04 发布

阅读量275

点赞数

分类专栏： js 前端工程化

本文链接：https://blog.csdn.net/huxiy1995/article/details/79089551

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端工程化

4 篇文章 0 订阅

订阅专栏

什么是Webpack?

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

与webpack相似的还有gulp，那么WebPack和Grunt以及Gulp相比有什么特性？
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），即“入口”，Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件，即“出口”。

接下来就开始使用Webpack啦！

一、命令行进行安装使用

安装

Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample project），在终端中转到该文件夹后执行下述指令就可以完成安装。 （先不要急着输入命令哦，往下看~）

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

正式使用Webpack前的准备

1.在上述创建文件夹中创建一个package.json文件， 这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用 npm init命令可以自动创建这个package.json文件：

npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可，下为我创建的package.json：

{
  "name": "sample_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^3.10.0"
  },
  "devDependencies": {
    "webpack": "^3.10.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包

// 安装Webpack
npm install --save-dev webpack

3.回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:

index.html –放在public文件夹中;
Greeter.js– 放在app文件夹中;
main.js–放在app文件夹中;

此时项目结构如下图所示:
这里写图片描述

我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js，之后我们还会详细讲述）。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

正式使用Webpack

webpack可以在终端中使用，在基本的使用方法如下：

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中输入如下命令:

# webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

结果如下：
这里写图片描述

运行成功后，文件结构中多出了bunble.js文件，文件结构变成：

可以看出webpack同时编译了main.js 和Greeter,js,现在打开index.html,可以看到如下结果：

至此，已经成功用第一种方法使用Webpack打包了一个文件了。不过使用命令行进行复杂的操作，其实是不太方便且容易出错的，接下来看看Webpack的另一种更常见的使用方法。

通过配置文件来使用Webpack

Webpack拥有很多其它的比较高级的功能（比如说本文后面会介绍的loaders和plugins），这些功能其实都可以通过命令行模式实现，但是正如前面提到的，这样不太方便且容易出错的，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面。

继续上面的例子来说明如何写这个配置文件，在当前创建文件夹的根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

有了这个配置之后，再打包文件，只需在终端里运行webpack命令即可，但非全局安装可能会出现如下错误：
这里写图片描述

原因是需要执行：

.\node_modules\.bin\webpack

这条命令会自动引用webpack.config.js文件中的配置选项，成功运行：

这里写图片描述

至此，第二种方法圆满完成！比起命令行的方法，这种方法明显更便捷，若我们需要省略所有命令（包括webpack），则需要进行第三种方法：

更快捷的执行打包任务

在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下：

{
    "name": "sample_project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
        "webpack": "^3.10.0"
    },
    "devDependencies": {
        "webpack": "^3.10.0"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
    },
    "author": "",
    "license": "ISC"
}

注：package.json中的script会按照一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。

npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对应的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，我们在命令行中输入npm start试试，输出结果如下：
这里写图片描述

至此，只需要使用npm start就可以打包文件了，有没有觉得webpack也不过如此嘛，不过不要太小瞧webpack，要充分发挥其强大的功能我们需要修改配置文件的其它选项。请见下一篇！

huxiy1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
走进Webpack大门

什么是Webpack? 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。与webpack相似的还有gulp，那么WebPack和Grunt以及G
复制链接

扫一扫