一.模块打包机

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. react native 升级到0.31.0的相关问题 mac xcode开发环境

    cmd + D和cmd + R快捷键没有反应 0.31.0版本换了一种加载方式,通过修改userDefaults达到debug目的 [userDefaults setObject:@"127 ...

  2. 设计模式的征途—6.建造者（Builder）模式

    建造者模式又称为生成器模式,它是一种较为复杂.使用频率也相对较低的创建型模式.建造者模式为客户端返回的不是一个简单的产品,而是一个由多个部件组成的复杂产品.因为,没有人买车会只买一个方向盘或者轮胎,大 ...

  3. JavaScript ,Python,java,C#,Go系列算法之【插入排序篇】

    常见的内部排序算法有:插入排序.希尔排序.选择排序.冒泡排序.归并排序.快速排序.堆排序.基数排序等.用一张图概括: 插入排序 插入排序(英语:Insertion Sort)是一种简单直观的排序算法. ...

  4. 学习MVC之租房网站（十）-预约和跟单

    在上一篇<学习MVC之租房网站(九)-房源显示和搜索>完成了房源的显示.检索,然后是用户的预约看房,以及后台操作员对预约看房的跟单操作. 预约看房仅有将预约信息保存到对应表的操作,预约表有 ...

  5. CentOS6.5下netcat工具安装教程

    1.下载下载地址:http://sourceforge.net/projects/netcat/files/netcat/0.7.1/下载的是netcat-0.7.1.tar.gz版本 2.拷贝用U盘 ...

  6. Net分布式系统之六：微服务之API网关

    本人建立了个人技术.工作经验的分享微信号,计划后续公众号同步更新分享,比在此更多具体.欢迎有兴趣的同学一起加入相互学习.基于上篇微服务架构分享,今天分享其中一个重要的基础组件“API网关”. 一.引言 ...

  7. ArrayList源码解析（一）

    源码解析系列主要对Java的源码进行详细的说明,由于水平有限,难免出现错误或描述不准确的地方,还请大家指出. 1.位置 ArrayList位于java.util包中. package java.uti ...

  8. 史诗手册！微信小程序新手自学入门宝典！

    一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...

  9. pod install 出现 Unable to find a specification for `xxxxx` 解决方案

    pod repo update 更新一下repo,更新完成之后即可解决无法找到xxx第三方框架的问题了

  10. ReentrantLock深入学习

    ReentrankLock  分为 非公平锁及公平锁 首先我们看一下它里面有哪些属性: private final Sync sync;Sync 这个类是 ReentrantLock的 一个静态内部类 ...