可以说现在但凡开发Single page application，webpack是一个不可或缺的工具。

WebPack可以看做是一个模块加工器，如上图所示。它做的事情是，接受一些输入，经过加工产生一些输出。

输入是我们web前端项目的模块文件，通常情况下这些文件都不能直接被浏览器的JavaScript执行引擎所执行。

输出是经过webpack加工后的能被浏览器使用的javascript和静态资源文件。比如ES6的js转成ES5的js，CSS预处理器文件转成CSS文件等等。

我们来动手做一个具体的例子。这个例子只花费10分钟时间，就能让我们熟悉webpack的基本用法。

1. 新建一个文件夹，首先用npm init命令创建一个package.json:

在下面使用命令行npm install --save-dev webpack，安装webpack并保存到项目的package.json的devDependencies下面。

花了一分钟才执行完毕。

执行完毕后，检查package.json, 发现webpack出现在devDependencies区域里。

此时项目文件夹层次结构如下图：

2. 新建一个index.html文件，输入以下内容：

<html>

<div id="app"></div>

<script src="./dist/bundle.js"></script>

</html>

从源代码看出，这个html引用了一个webpack打包之后生成的输出文件。

既然是模块化开发，我们就新建一个模块，实现文件放在print.js里：

function print(content){

    window.document.getElementById("app").innerText = "Hello," + content;

}

module.exports = print;

这个模块就实现了一个print函数，把传入的字符串显示在index.html的id为app的div标签里。

有了module后，我们还需要执行这个module。为此，新建一个main.js文件，输入下列内容：

const print = require("./print.js");

print("Jerry");

最后，我们得生成index.html使用到的bundle.js文件。为此，我们要给webpack定义一个任务，通过新建文件webpack.config.js完成。

entry字段定义了webpack的输入：main.js, 输出则放在当前目录dist下面的bundle.js里。

const path = require("path");

module.exports = {

entry: "./main.js",

output: {

filename: "bundle.js",

path: path.resolve(__dirname, "./dist"),

},

mode: 'development' // 设置mode

};

至此，webpack_demo文件夹下的资料看起来是这样的：

执行命令行webpack：

执行完webpack后，打开index.html, 看到了我们期望中的Hello Jerry:

至此，一个最简单的webpack例子就跑通了。

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Webpack 10分钟入门的更多相关文章

  1. Apache Shiro系列三，概述 —— 10分钟入门

     一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...

  2. JavaScript 10分钟入门

    JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...

  3. kafka原理和实践（一）原理：10分钟入门

    系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...

  4. Markdown - Typora 10分钟入门 - 精简归纳

    Markdown - Typora 10分钟入门 - 精简归纳 JERRY_Z. ~ 2020 / 8 / 22 转载请注明出处! 目录 Markdown - Typora 10分钟入门 - 精简归纳 ...

  5. [入门到吐槽系列] Webix 10分钟入门 一 管理后台制作

    前言 本人是服务端程序员,同时需要兼职前端开发.常用的就是原生态的HTML.Javascript,也用过ExtJS.Layui.可是ExtJS变公司后非常难用.Layui上手还行,用过一段时间,会觉得 ...

  6. [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用

    前言 继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...

  7. 「从零单排canal 01」 canal 10分钟入门（基于1.1.4版本）

    1.简介 canal [kə'næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据 订阅 和 消费.应该是阿里云DTS(Data Transfer Servi ...

  8. python 10分钟入门pandas

    本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook .习惯 ...

  9. HTML--HTML入门篇（我想10分钟入门HTML，可以，交给我吧）

    我要正经的讲一节课,咳咳! HTML简介(废话) HTML称为超文本标记语言,是一种标识性的语言.它包括一系列标签．通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整 ...

随机推荐

  1. java&nbsp;Class类

    java Class类 Class类(在java.lang包中,Instances of the class Classrepresent classes and interfaces in a ru ...

  2. Unite 2017 干货整理 同步篇

    http://www.kisence.com/2017/05/17/unite-2017-gan-huo-zheng-li-tong-bu-pian/ Unite 2017 干货整理 同步篇 2017 ...

  3. 关于setTimeout(fn,0)

    JS是单线程引擎:它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javasc ...

  4. this真题编译

    1 x y z分别输出的是什么? var x=1,  y=z=0; function add(n){ return n= n+1; }; y=add(x); function add(n){ retu ...

  5. (转载)常用Git命令清单

    我每天使用Git,但是很多命令记不住 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60~100个命令 下面是我整理的常用Git命令清单. Workspace:工作区 In ...

  6. [Andoird]Andoird之Log

    一.Log Android中的日志工具类是 Log(android.util.Log),这个类中提供了如下几个方法来供我们打印日志. Log.v() 这个方法用于打印那些最为琐碎的,意义最小的日志信息 ...

  7. ASP .NET Core 2.1 HTTP Error 502.5 – Process Failure

    ASP .NET Core HTTP Error 502.5 – Process Failure https://www.cnblogs.com/loui/p/7826073.html 页面返回错误 ...

  8. (转)nginx限制上传大小和超时时间设置说明/php限制上传大小

    nginx限制上传大小和超时时间设置说明/php限制上传大小 原文:http://www.cnblogs.com/kevingrace/p/6093671.html 现象说明:在服务器上部署了一套后台 ...

  9. Jenkins+Gitlab+Ansible自动化部署(一)

    首先准备实验环境 虚拟机 主机名 IP地址 服务 系统版本 内核版本 Vmware Workstation 14 gitlab.example.com 192.168.244.130 gitlab  ...

  10. yum指令之修复

    折腾着搞 openvpn 网站服务器 yum指令 出了点问题 ------------------------------------------------------------ [root@cl ...