webpack学习之入门实例

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自动为我们生成了一个bundle.js文件以及打包后的样式文件,打开index.html文件效果如下:

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

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

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

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

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

webpack

执行效果:

index.html效果同上。。。

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

首先是安装插件:

npm install webpack-dev-server -g

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小白安全

小白博客 linux目录结构

初学Linux,首先需要弄清Linux 标准目录结构 root --- 启动 Linux 时使用的一些核心文件。如操作系统 内核 、引导程序 Grub 等...

3436
来自专栏cnblogs

中后端管理系统前后分离、前端框架的实现拙见

一、实现思路 在实践中后台管理系统的前后端分离时,往往会因为业务量的增加使其前端项目难以维护,以及打包时间不理想,还有业务系统与框架之间区分不在明显。本文是本人...

2419
来自专栏小怪聊职场

爬虫|利用Anyproxy爬取微信公众号文章及临时链接转永久链接

1.8K8
来自专栏Python

github设置添加SSH

很多朋友在用github管理项目的时候,都是直接使用https url克隆到本地,当然也有有些人使用 SSH url 克隆到本地。然而,为什么绝大多数人会使用h...

1570
来自专栏IT米粉

hexo——轻量、简易、高逼格的博客

写blog虽然经历了N多不同时代的产品,恒久不变的始终是自己无人问津的网站。虽然没几个人看,还是隔断时间就要折腾一下。从最开始的wordpress,到tale,...

3422
来自专栏从流域到海域

Vue.js项目目录结构

folder/flie 说明 bulid 最终生成代码存放位置。 config 配置目录,存放配置文件。index.js中存放了环境和端口等配置...

3535
来自专栏古时的风筝

Django集成百度富文本编辑器uEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 首先...

5359
来自专栏进击的君君的前端之路

如何发布npm包

1342
来自专栏王磊的博客

ubuntu搭建nodejs生产环境——快速部署手册

2075
来自专栏性能与架构

小程序示例 - 不同页面间的消息传递

场景 假设有两个页面:用户列表页、信息编辑页 在列表中点击后某条信息后,进入编辑页面 ? 修改了用户信息后,返回到列表页,列表中需要显示修改后的信息 例如把 “...

4057

扫码关注云+社区

领取腾讯云代金券