Webpack 10分钟入门
可以说现在但凡开发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分钟入门的更多相关文章
- Apache Shiro系列三，概述 —— 10分钟入门
一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...
- JavaScript 10分钟入门
JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...
- kafka原理和实践（一）原理：10分钟入门
系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...
- Markdown - Typora 10分钟入门 - 精简归纳
Markdown - Typora 10分钟入门 - 精简归纳 JERRY_Z. ~ 2020 / 8 / 22 转载请注明出处! 目录 Markdown - Typora 10分钟入门 - 精简归纳 ...
- [入门到吐槽系列] Webix 10分钟入门 一 管理后台制作
前言 本人是服务端程序员,同时需要兼职前端开发.常用的就是原生态的HTML.Javascript,也用过ExtJS.Layui.可是ExtJS变公司后非常难用.Layui上手还行,用过一段时间,会觉得 ...
- [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用
前言 继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...
- 「从零单排canal 01」 canal 10分钟入门（基于1.1.4版本）
1.简介 canal [kə'næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据 订阅 和 消费.应该是阿里云DTS(Data Transfer Servi ...
- python 10分钟入门pandas
本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook .习惯 ...
- HTML--HTML入门篇（我想10分钟入门HTML，可以，交给我吧）
我要正经的讲一节课,咳咳! HTML简介(废话) HTML称为超文本标记语言,是一种标识性的语言.它包括一系列标签．通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整 ...
随机推荐
- office word标题前面的编号变成黑色方块而不显示数字编号的解决方法
编写项目文档,文档的模板是office2003版的,文件后缀是.doc. 安照模板的格式把文档编写完成后保存.因为我是2010版的office,所以就保存成2010格式的文件后缀变成了.docx. 结 ...
- linux下删除3分钟之前指定文件夹下的指定类型文件
如果想要修改crontab,一般做以下的几步就可以了 将crontab 推到一个自定义的文件上 crontab -l>;tmp 编辑这个文件,做需要的修改 vi tmp 推回crontab cr ...
- 自定义TabWidget
在开发过程中,默认的TabWidget不能满足我们对于UI的要求并且没有足够的属性工我们去修改,这个时候能够自定义TabWidget是非常必要的.自定义TabWidget组要运用的是TabSpec.s ...
- 计总与排名SUM和RANK函数
准备一些数据: CREATE TABLE [dbo].[SalesPerformance]( ,) NOT NULL, ) NOT NULL, [OrderDate] [DATE] NULL, ,) ...
- poj 2049（二分+spfa判负环）
poj 2049(二分+spfa判负环) 给你一堆字符串,若字符串x的后两个字符和y的前两个字符相连,那么x可向y连边.问字符串环的平均最小值是多少.1 ≤ n ≤ 100000,有多组数据. 首先根 ...
- floyd判环算法（龟兔赛跑算法）
floyd判环算法(龟兔赛跑算法) 注意,这个算法是用来判断一条链+一条环的图,环的长度或者环与链的交界处的,所以此floyd非彼floyd(虽然都是一个人想出来的). (图不是我的) 如果只要求环的 ...
- Python学习笔记(字典）
今天学习一个python中的基本类型--字典(dictionary) 字典这种数据结构有点像我们平常用的通讯录,有一个名字和这个名字对应的信息.在字典中,名字叫做“键”,对应的内容信息叫做“值”.字典 ...
- SpringBoot2.0 基础案例(03)：配置系统全局异常映射处理
一.异常分类 这里的异常分类从系统处理异常的角度看,主要分类两类:业务异常和系统异常. 1.业务异常 业务异常主要是一些可预见性异常,处理业务异常,用来提示用户的操作,提高系统的可操作性. 常见的业务 ...
- webpack4.0介绍与使用（一）
1:webpack的基本使用: ##在网页中会引用那些静态资源: js, css, images, 字体文件和模板文件(.vue)等 ##网页总引用静态资源多了以后会有那些问题: 网页加载速度慢,因为 ...
- 已知单链表的数据元素为整型数且递增有序，L为单链表的哨兵指针。编写算法将表中值大于X小于Y的所有结点的顺序逆置。（C语言）
对此题目的完整示例可直接运行代码如下: #include <stdio.h> #include <stdlib.h> typedef struct LNode{ int dat ...