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文件内容,页面便会自动刷新:
很不错,很酷炫的感觉。。。
webpack学习之入门实例的更多相关文章
- webpack学习(入门基础)
webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...
- Eclipse插件开发_学习_02_GEF入门实例
一.前言 这一节,我们将会创建一个GEF入门实例 二.新建RCP项目 1. New 一个 Plug-in Project 2.输入项目名 项目名:com.ray.gef.helloworld 3.Co ...
- vue.js学习之入门实例
之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...
- MonoRail学习-入门实例篇
1.到官方网站下载安装文件,地址如下: http://www.castleproject.org/index.php/Castle:Download目前最新版本Beta5(您也可以不需要下载,直接使用 ...
- mybatis学习之入门实例
测试版本 mybatis:3.2.8 数据库:mysql 项目结构 jar包准备 mybatis-3.2.8.jar mysql-connector-java-5.1.39-bin.jar junit ...
- react webpack.config.js 入门学习
在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...
- [IT学习]sql 入门及实例
sql 是一种数据库查询语言,可以让你很快的查询到数据.其实一般情况下,你也可以采用excel来查询数据库数据. 但是人们通常认为sql会更加灵活和方便一些. sql学习的入门网站: http://w ...
- NodeJS学习笔记 进阶 (10)Nodejs 进阶:log4js入门实例(ok))
个人总结:读完这篇文章讲解了log4js的使用,具体更多可以参考npmjs上看,读完这篇需要15分钟. 摘选自网络 对于线上项目用来说,日志是非常重要的一环.log4js是使用得比较多的一个日志组件, ...
- mybatis学习一:基于xml与注解配置入门实例与问题
注:本case参考自:http://www.cnblogs.com/ysocean/p/7277545.html 一:Mybatis的介绍: MyBatis 本是apache的一个开源项目iBatis ...
随机推荐
- Java学习笔记14--动态代理
InvocationHandler接口 public interface InvocationHandler{ public Object invoke(Object proxy,Method met ...
- java多线程-Java中的Copy-On-Write容器
Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才会真正把内容Copy出去形成一个新的内容然后再改, ...
- 小甲鱼python视频弟十二讲(关于字符串的方法及注释下)
1,ljust(width[, fillchar]) width -- 指定字符串长度. fillchar -- 填充字符,默认为空格. 用法:返回一个原字符串左对齐,并使用空格填充至指定长度的新字 ...
- Java关键字:transient,strictfp和volatile简介
关键字:transient 使用对象:字段 介绍:transient说明一个属性是临时的,不会被序列化. 当对象进行序列化(Serializable)过程时候,有一些属性的状态是瞬时的,这样的对象是无 ...
- lsslot
lsslot 命令 用途 显示动态可重新配置的插槽(比如热插拔)及其特性. 语法 lsslot -c ConnectorType [ -a | -o | -l DeviceName | -s Slot ...
- NSString 的 compare 方法
- (NSComparisonResult)compare:(NSString *)string options:(NSStringCompareOptions)mask range:(NSRange ...
- 水果项目第2集-建立数据库->编写数据访问基础类->实现类的方法->调试通过
看来写博客对懒人也有好处.监督自己的好处. 今天一打开电脑,就想继续写了. 今天就开始动手做了. 数据库建立,编写访问数据库代码,实现各个类的方法,调试这些方法. 这些基础的代码写完后,就可以写逻辑代 ...
- JavaScript-插入concat,splice,截取slice
拼接和截取:concat 拼接: var newArr=arr.concat(值1,值2,值3,值4,.....); 将值1值2,以及arr2中每个元素一次拼接到arr1结尾,返回新数组 强调: 1. ...
- java线程详解(二)
1,线程安全 先看上一节程序,我们稍微改动一下: //线程安全演示 //火车站有16张票,需要从四个窗口卖出,如果按照上面的多线程实现,程序如下 class Ticket implements Run ...
- Text input(文本输入框)
Text input(文本输入框)是用来获得用户输入的绝佳方式. 你可以用如下方法创建: <input type="text"> 注意,input元素是自关闭的.