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 条评论
登录 后参与评论

相关文章

来自专栏吴小龙同學

手把手教你建github技术博客by hexo

适合人群 喜欢写 Blog 的人 有一定的编程基础 爱折腾的人 熟练使用版本控制 Git 了解使用 GitHub 熟悉基本的 MarkDown 语法 环境准备 ...

3657
来自专栏云计算教程系列

如何在CentOS上安装Perl 5

Perl5是一种全功能的编程语言。它用于所有类型的生产项目,包括世界各地的商业业务系统。Perlbrew是Perl5的安装和版本切换工具,您可以安装,删除,并在...

1120
来自专栏林德熙的博客

SublimeText 粘贴图片保存到本地

在写 Markdown 时,比较难的是把图片粘贴保存到本地,或上传到服务器。 本文提供一个简单的方式可以把剪贴板的图片粘贴保存本地。

542
来自专栏逻辑熊猫带你玩Python

Linux | 从windows来到Linux,目录操作

推荐新手使用Ubuntu16.04 LTS的桌面版,在桌面版提供了桌面系统,虽然论速度和便利性与windows平台想去甚远,但是从学习的角度讲,可以省去很多麻烦...

603
来自专栏逸鹏说道

vscode编写插件详细过程

前言 之前编写了一个vscode插件用vscode写博客和发布,然后有园友要求写一篇来介绍如何开发一个vscode扩展插件,或者说介绍开发这个插件的过程。然而文...

2986
来自专栏青玉伏案

Git知识总览(五) Git中的merge、rebase、cherry-pick以及交互式rebase

上篇博客聊了《git分支管理之rebase 以及 cherry-pick相关操作》本篇博客我们就以Learning Git中的关卡进行展开。下方列举了Learn...

2576
来自专栏zaking's

走近webpack(0)--正文之前的故事

  在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webp...

2614
来自专栏Youngxj

emlog后台登录地址加密

2378
来自专栏企鹅号快讯

Python3+Selenium2 Web自动化环境搭建

当一件事情要做两次以上,那么你就需要为它写个自动化脚本,本系列文章讲的就是如何执行Web自动化。一般Web自动化测试环境主要有三部分组成:Python、Sele...

4367
来自专栏大前端开发

【新闻】微信web开发者工具更新,及注意事项

这次的微信web开发者工具的更新主要是对开发工具的功能增强和bug修复,增加修改了一些最近一直频繁在开发者中被提出的问题,比如请求的地址不是合法的域名地址之类的...

693

扫码关注云+社区