2019独角兽企业重金招聘Python工程师标准>>>

在下面的例子中，简单使用webpack打包一个js。并且把这个js引用的其他js、json数据一起打包进去。

官网：http://webpack.github.io/
英文文档： https://webpack.js.org/
中文文档： https://doc.webpack-china.org/

1、创建一个文件夹作为项目的文件夹。

新建文件夹learn01。

2、创建package.json。

在learn01文件夹里面新建package.json。

3、安装webpack。

全局安装

这里需要全局安装。

npm install webpack -g

如果是webpack4 还需要安装webpack-cli，因为webpack的命令独立出来成为了一个webpack-cli包。

npm install webpack-cli -g

只在当前项目安装。使用参数--save-dev把依赖添加到devDependencies中。

npm install webpack --save-dev

npm install webpack-cli --save-dev

4、创建源文件。

创建app.js、data.json、math.js。结构如下：

data.json的内容：

{"name":"张三","age":25
}

math.js的内容：

//这里export是ES6的写法，中把方法、属性暴露出去。
export function add(a,b) {return a+b;
}export function sub(a,b) {return a-b;
}

app.js的内容：

import {add,sub} from "./math";
import data from "./data.json";document.write("执行了entry.js文件。。。。。。。。。。。" + "</br>");document.write("3+2 = " + add(3,2) + "</br>");document.write("25 - 20 = " + sub(25,20) + "</br>");document.write("data 是"+JSON.stringify(data));

5、webpack打包app.js。

打包命令如下。就是把app.js打包为app_bunde.js

webpack src/js/app.js  -o dist/js/app_bundle.js

6、在html中使用app_bunde.js。

在test.html中使用app_bunde.js。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><script src="./app_bundle.js"></script>
</head>
<body></body>
</html>

在浏览器中打开test.html。效果如下，和预期的一致。成功。

转载于:https://my.oschina.net/kunBlog/blog/1633475

1、webpack入门例子。相关推荐

webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
webpack入门学习手记（一）
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
webpack入门学习手记（一） 1
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
(三)webpack入门——webpack功能集合的demo
ErduYang 自律的人生才自由博客园首页新随笔联系订阅管理随笔 - 37文章 - 0评论 - 8 (三)webpack入门--webpack功能集合的demo 此篇文章来源于http ...
webpack入门学习手记（三）
本人微信公众号:前端修炼之路,欢迎关注. 距离上一次更新这个系列,过去了两天.最近实在是有点忙,没有挤出时间整理.感觉日更还真是困难? 以下是正文. 管理资源如果看过之前的系列文章,应该会有一个学习 ...
Cassandra 单机入门例子——有索引
入门例子: http://wiki.apache.org/cassandra/GettingStarted 添加环境变量并source生效,使得可以在任意位置执行cassandra/bin安装目录下的 ...
spark streaming 入门例子
spark streaming 入门例子: spark shell import org.apache.spark._ import org.apache.spark.streaming._sc.ge ...
WEBPACK 入门
webpack 入门 1. 什么是webpack 官网介绍:webpack是一个模块打包器.webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源.(webpack is a mod ...
图解VC++2012编译安装GDAL1.11.0和入门例子
相关下载 http://pan.baidu.com/s/1o7OEMc6 gdal1.rar - 入门例子 GDAL书籍代码及数据.rar gdal1110.zip - 下载的源码 GDAL.rar ...

1、webpack入门例子。