webpack学习之入门实例

时间:2022-10-25 10:29:54

webpack:前端打包神器,目前活跃度甚至超过了gulp、grunt等,使用webpack打包,简单快速,下面记录下webpack环境搭建以及基本使用:

1、首先新建一个空白目录,用于项目根目录,比如我这里是simple_project

2、cmd窗口全局安装webpack:

npm install webpack -g      //cnpm install webpack -g

3、进入到项目内部执行npm init进行项目初始化,初始化后项目会多两个文件:node_modules、package.json文件

4、项目本地安装webpack依赖:

npm install webpack --save

5、新建entry.js入口文件:

require("./style.css");
document.write("it works</br>");
document.write(require("./content.js"));

这里我们引入了一个content.js文件和一个style.css样式表文件,接下来继续,新建index.html首页:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

这里我们直接引入了bundle.js文件,该文件尚未定义,这个是entry.js文件经过webpack打包后生成的文件,这里先这么引入即可。

6、新建style.css样式文件和content.js文件:

style.css如下:

body {
background: yellow;
}

content.js:

module.exports = "this is from content.js";

这里的content.js直接exports一个字符串内容出来,然后entry.js因为引入了content.js,所以相当于直接引入了该字符串,这里的话所有的代码已经书写完毕。

7、webpack打包:

首先安装loaders打包工具:

npm install css-loader style-loader --save

webpack打包时会自动识别文件之间的依赖关系,直接生成单个文件,使用方法如下:

webpack ./entry.js bundle.js --module-bind "css=style!css"

运行效果如下:

webpack学习之入门实例

这个时候打开项目根目录会看到如下文件结构:

webpack学习之入门实例

webpack自动为我们生成了一个bundle.js文件以及打包后的样式文件,打开index.html文件效果如下:

webpack学习之入门实例

打包之后页面依赖更加简单,index.html只需引入一个js即可,而js里面可以正常引入其它模块,样式及功能也都全部ok,方便快捷管理前端依赖。

8、换种方法实现以上内容:

上面使用webpack打包时指定了一些打包参数,这些参数其实我们可以直接配置到配置文件,可以免去打包命令过长的问题,思路更加清晰:

首先拷贝一份以上所有文件到一个新的目录,再删除其中webpack已经打包生成的文件,之后的文件目录如下:

webpack学习之入门实例

接下来直接使用以下命令打包生成:

webpack

执行效果:

webpack学习之入门实例

index.html效果同上。。。

9、接下来使用webpack-dev-server实现无刷新预览:

首先是安装插件:

npm install webpack-dev-server -g

进入到项目下启动服务,这样,bundle.js文件一旦修改便会自动编译,页面浏览器也会自动刷新,看下效果:

webpack学习之入门实例

试着修改下entry.js文件内容,页面便会自动刷新:

webpack学习之入门实例

很不错,很酷炫的感觉。。。

webpack学习之入门实例的更多相关文章

  1. webpack学习(入门基础)

    webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...

  2. Eclipse插件开发&lowbar;学习&lowbar;02&lowbar;GEF入门实例

    一.前言 这一节,我们将会创建一个GEF入门实例 二.新建RCP项目 1. New 一个 Plug-in Project 2.输入项目名 项目名:com.ray.gef.helloworld 3.Co ...

  3. vue&period;js学习之入门实例

    之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...

  4. MonoRail学习-入门实例篇

    1.到官方网站下载安装文件,地址如下: http://www.castleproject.org/index.php/Castle:Download目前最新版本Beta5(您也可以不需要下载,直接使用 ...

  5. mybatis学习之入门实例

    测试版本 mybatis:3.2.8 数据库:mysql 项目结构 jar包准备 mybatis-3.2.8.jar mysql-connector-java-5.1.39-bin.jar junit ...

  6. react webpack&period;config&period;js 入门学习

    在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...

  7. &lbrack;IT学习&rsqb;sql 入门及实例

    sql 是一种数据库查询语言,可以让你很快的查询到数据.其实一般情况下,你也可以采用excel来查询数据库数据. 但是人们通常认为sql会更加灵活和方便一些. sql学习的入门网站: http://w ...

  8. NodeJS学习笔记 进阶 &lpar;10&rpar;Nodejs 进阶:log4js入门实例&lpar;ok&rpar;&rpar;

    个人总结:读完这篇文章讲解了log4js的使用,具体更多可以参考npmjs上看,读完这篇需要15分钟. 摘选自网络 对于线上项目用来说,日志是非常重要的一环.log4js是使用得比较多的一个日志组件, ...

  9. Vue&period;js2&period;0从入门到放弃---入门实例

    最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...

随机推荐

  1. 如何测试 Android 中的定时事件

    测试定时事件不太容易,比如要测试 AlarmManager 中定时明天4点的一个事件,你总不能等到明天4点再看看吧. Roman Nurik 提供了两个用来测试定时事件的命令:adb shell du ...

  2. SQL Server 启用 xp&lowbar;cmdshell 与bcp 使用

    启用 xp_cmdshell 1: sp_configure 'show advanced options',1 2: reconfigure 3: GO 4: 5: sp_configure 'xp ...

  3. ubuntu14&period;04折腾迅雷xware

    迅雷一直没有出linux版,wine不想去弄.linux下虽然也有各种bt软件,无奈我试用后却发现速度远比不上迅雷,甚至有些资源根本找不到.而有些迅雷的专用链接,更是没法下(原谅我2M的小水管,却喜欢 ...

  4. codeforces 282E&period; Sausage Maximization Trie

    题目链接 给n个数, 让你找出一个前缀和一个后缀, 它们异或完以后最大, 前缀和后缀都是异或得来的, 可以为空, 为空时按0算.前缀后缀不可覆盖. 这题好神, 竟然是Trie树... 首先将所有数的异 ...

  5. 服务网关zuul之六:Zuul高可用

    我们实际使用Zuul的方式如上图,不同的客户端使用不同的负载将请求分发到后端的Zuul,Zuul在通过Eureka调用后端服务,最后对外输出.因此为了保证Zuul的高可用性,前端可以同时启动多个Zuu ...

  6. 微信小程序——1、文件的认识

    主体文件的构成 微信小程序的主体由三个部分组成,需放在主目录中,名称也是固定的 app.js:微信小程序的主逻辑文件,主要用来注册小程序 app.json:微信小程序的主配置文件,对微信小程序进行全局 ...

  7. jekyll建站详细教程

    Jekyll是一款静态博客生成器,也是github page支持的后台引擎,所以如果你有以下需求,极力推荐使用jekyll搭建博客,>>浏览我的博客 个性化的展示界面,站点逻辑 个性化的域 ...

  8. lspci

    lspci 是一个用来显示系统中所有PCI总线设备或连接到该总线上的所有设备的工具. 列出所有的PCIE设备: lspci 选项: -v 使得 lspci 以冗余模式显示所有设备的详细信息. -vv ...

  9. python3 购物车练习

    # 购物车# 功能要求:# 要求用户输入总资产,例如:2000# 显示商品列表,让用户根据序号选择商品,加入购物车# 购买,如果商品总额大于总资产,提示账户余额不足,否则,购买成功.# 可充值.某商品 ...

  10. Knockout 实例

    定义见:http://baike.baidu.com/item/Knockout/18611883#viewPageContent 此处仅列举一个小例子 <p> <select da ...