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的原创文章,请关注公众号"汪子熙":
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP实现新型冠状病毒疫情实时图的实例
- 深入浅析Python2.x和3.x版本的主要区别
- 用户态进程如何得到虚拟地址对应的物理地址?
- Linux中利用grep命令如何检索文件内容详解
- laravel框架学习笔记之组件化开发实现方法
- PHP7创建销毁session的实例方法
- Vim如何使用相对行号实现一切操作详解
- laravel 框架执行流程与原理简单分析
- 对python自动生成接口测试的示例讲解
- 解决pip install xxx报错SyntaxError: invalid syntax的问题
- PHP如何使用JWT做Api接口身份认证的实现
- 解决python3 Pycharm上连接数据库时报错的问题
- php把文件设置为插件的技巧方法
- Python中fnmatch模块的使用详情
- tp5框架使用cookie加密算法实现登录功能示例