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学习之入门实例的更多相关文章

  1. webpack学习（入门基础）

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

  2. Eclipse插件开发_学习_02_GEF入门实例

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

  3. vue.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.config.js 入门学习

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

  7. [IT学习]sql 入门及实例

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

  8. NodeJS学习笔记 进阶 (10)Nodejs 进阶：log4js入门实例(ok))

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

  9. mybatis学习一：基于xml与注解配置入门实例与问题

    注:本case参考自:http://www.cnblogs.com/ysocean/p/7277545.html 一:Mybatis的介绍: MyBatis 本是apache的一个开源项目iBatis ...

随机推荐

  1. (十二) 一起学 Unix 环境高级编程 (APUE) 之 进程间通信（IPC）

    . . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...

  2. 在Windows上运行Tomcat

    一.下载jdk 百度搜索jdk 64位 下载,直接就有链接.或者官网下载 二.下载tomcat http://tomcat.apache.org/ 三.安装jdk并配置环境 安装jdk后进入控制面板- ...

  3. Rsync+inotify实现实时同步

    1.1 inotify介绍 inotify是一种强大的.细粒度的.异步的文件系统事件控制机制.linux内核从2.6.13起,加入了inotify支持,通过inotify可以监控文件系统中添加.删除. ...

  4. Jmeter应用初步介绍

    一.工具介绍 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资 ...

  5. sqlite中的replace、insert、update之前的区别

    本文转自http://www.ithao123.cn/content-933827.html,在此感谢作者 android数据库操作,有两种方式,一种用android提供给我们的数据库操作函数inse ...

  6. DIV布局-高度不同DIV，自动换行并对齐

    最近弄了一个动态添加div框,每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐. 刚开始的效果: 要改啊,搞不定,问了UI高手,终于给出了完美解决方 ...

  7. cocos2d-x 之 CCArray 源码分析(2)

    cocos2d-x 自己实现了一个数组CCArray ,下面我们来分析一下CCArray的源码 CCArray继承CCObject,所以,CCArray也具有引用计数功能和内存自动管理功能. 数组的源 ...

  8. poj 1080 （LCS变形）

    Human Gene Functions 题意: LCS: 设dp[i][j]为前i,j的最长公共序列长度: dp[i][j] = dp[i-1][j-1]+1;(a[i] == b[j]) dp[i ...

  9. 关于collapsed margin（外边距合并）

    这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...

  10. Keepalived安装配置

    一.  介绍 keepalived:是一个类似于 layer3, 4 & 7 交换机制的软件,也就是我们平时说的第 3 层.第 4 层和第 7层交换. Keepalived 的作用是检测 we ...