一.模块打包机

1.创建文件

　　在目标文件下建立一个src文件夹作为js代码区；作为例子，我创建了两个js文件，并利用commonJS规范require引入到index.js中；

moduleA.js:

module.exports={

    name:"MoudleA",

    getName:function(){

        return "我是AAA模块"

    }

}

moduleB.js:

module.exports={

    name:"MoudleB",

    getName:function(){

        return "我是BBB模块"

    }

}

index.js:

var moduleA = require("./moduleA");

var moduleB = require("./moduleB");

console.log(moduleA.name);

console.log(moduleB.name);

index.html:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

</head>

<body>

    <div></div>

<script src="src/index.js"></script>

<!--     <script src="dist/index.bundle.js"></script> -->

</body>

</html>

此时运行必定会出错。因为浏览器不认识require,浏览器不支持什么commonJS,所以这时候需要用到webpack。

2.安装webpack

npm install -g webpack  //全局安装

3.打包

webpack  src/index.js  ./build.js

把index.js打包成build.js，所以index.html的script路径要改为新的打包后的文件路径。

<script src="build.js"></script>

此时再执行webpack src/index.js  ./build.js成功则会生成一个build.js文件。

4.简化打包指令

我们前面在更改代码时需要多次执行webpack src/index.js  ./build.js命令，那么如何简化这条命令，换句话说，可不可以用webpack这个指令来代替这一长串呢？当然是可以的。

首先，配置webpack.config.js文件；

这里的输出文件夹dist如果不存在会自动帮我们创建好。配置好入口和输出路径后别忘记改index.html的script路径。

需要注意的是，我们现在只是全局安装了webpack,这是不够的，我们需要局部再安装一次webpack,npm install --save-dev webpack

然后我们再执行webpack命令。

4.热更新webpack-dev-server

我们在每次修改代码的时候都需要手动的执行webpack命令，我们可以用热更新webpack-dev-server自动的更新浏览器；

安装webpack-dev-server

npm install --save-dev webpack-dev-server

在webpack.config.js里面配置devServer

此时执行

webpack-dev-server --inline --hot

便能实现热更新了。还有更简化的，便是配置package.json的启动，

这里增加一条 "start":"webpack && webpack-dev-server --inline --hot" 便实现了npm start 代替webpack和webpack-dev-server --inline --hot命令

执行

npm start

打开浏览器8088端口，

webpack前端工程化构建工具的使用的更多相关文章

  1. webpack前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 本人最 ...

  2. 前端自动化构建工具--Gulp&&Webpack

    前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...

  3. 前端自动化构建工具——gulp环境搭建教程

    gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...

  4. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  5. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  6. 前端开发构建工具gulp的安装使用

    曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...

  7. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  8. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

  9. 前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

随机推荐

  1. httpd配置ResponseHeader

    今天遇到一个问题:我把项目编译后的静态文件发布到开发机上,开发机使用httpd启的静态文件服务,页面的访问是在特制的壳浏览器里面,我更新了代码后,发现页面被缓存了,找到壳的RD联调了一下,发现我的主页 ...

  2. Lamp环境搭建Linux CentOS6.5编译安装mysql5.6

    经典web开发组合Lamp环境搭建之mysql安装详解 安装前准备 通过rpm命令检查centos上是否已经安装mysql,然后卸载已经存在的mysql版本 [root@localhost src]# ...

  3. 每天一道Java题[5]

    题目 String.StringBuilder.StringBuffer有什么异同? 解答 相同点:String.StringBuilder.StringBuffer都可以用来存储字符串. 不同点: ...

  4. Hibernate原理

    Hibernate使用基本上会,但是却一直不知道Hibernate内部是怎么工作的 什么是Hibernate? Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象 ...

  5. 唯独ie浏览器缓存ajax请求

    用fiddler调试http请求,在ie浏览器下,如果请求命中缓存,fiddler不会包含该请求.但是在chrome下会包含缓存的请求,Result显示为304. ie浏览器还会缓存通过ajax请求的 ...

  6. 第 10 章 MySQL Server 性能优化

    前言: 本章主要通过针对MySQL Server(mysqld)相关实现机制的分析,得到一些相应的优化建议.主要涉及MySQL的安装以及相关参数设置的优化,但不包括mysqld之外的比如存储引擎相关的 ...

  7. 细说"回车"和"换行"的故事

    引言 最近在php还有c#以及memcache的shell当中经常看到\r\n的写法,刚开始还没注意, 不过后面感觉这样写有些不对头,\r表示回车  \n表示换行,那这样不是换行了两次吗? 为了解决疑 ...

  8. 总结常见的ES6新语法特性。

    前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...

  9. Promise (1) 初步接触

    总想着王者荣耀排位赛再提升个等级就弃掉游戏好好学习,然而打了两个周也没升上去,看来是应该换个方向发挥了. 最近看了<javascript Promise迷离书>,对Promise的理解颇有 ...

  10. VR全景智慧城市--2017年VR项目加盟将是一个机遇

    全景智慧城市项目是河南艺境空间文化传播有限公司自主开发的国内第一家商业全景平台, 旨在构建全景城市,实现智慧生活,让人们随时随地身临其境拥有全世界,享受快捷.真实.趣味.优质生活. 以VR虚拟现实技术 ...