一.模块打包机

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. RNN的介绍

    一.状态和模型 在CNN网络中的训练样本的数据为IID数据(独立同分布数据),所解决的问题也是分类问题或者回归问题或者是特征表达问题.但更多的数据是不满足IID的,如语言翻译,自动文本生成.它们是一个 ...

  2. [Angularjs]$http.post与$.post

    摘要 在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇到在服务端无法接受到参数的情况,这里有必要与$.post进行比较学习一下. 一个例子 这里模拟登录的一个场 ...

  3. 【JavaScript OPP基础】---新手必备

    今天和大家分享一下近期整理的有关JavaScriptOPP的基础知识~~~我们一起来学习一下-- JavaScriptOPP基础 一.面向对象编程OOP1.语言的分类:面向机器:汇编语言面向过程:C语 ...

  4. 如何选择版本控制系统之二---Git的研发应用场

    之前写了一篇<如何选择版本控制系统 ---为什么选择Git版本控制系统>,地址是:http://www.cnblogs.com/goldenfish/p/6876864.html,有兴趣的 ...

  5. XD

    题目 是否完成 题目分类 简要题解 没有上司的舞会(codevs1380) Y 树形dp dp[u][0]表示不包含此节点,dp[u][1]表示包含,转移方程为 dp[u][0]+=max(dp[v] ...

  6. Intel CPU命名规则的简略解析

    Intel的CPU命名规则一直不是特别清楚,而网上的很多解读是不准确,甚至是错误的,应该以官方文档为准.所以我在查阅官方资料的基础上,以一种简明扼要的方式记录下来.值得说明的是,这个解析只是简略的,一 ...

  7. Akka（3）： Actor监管 - 细述BackoffSupervisor

    在上一篇讨论中我们谈到了监管:在Akka中就是一种直属父子监管树结构,父级Actor负责处理直属子级Actor产生的异常.当时我们把BackoffSupervisor作为父子监管方式的其中一种.实际上 ...

  8. 微信小程序 获取OpenId

    微信小程序 官方API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/ 首先 以下代码是 页面加载请求用户 是否同意授权 同意之后 用code 访问 微信 ...

  9. javascript常见面试题

    闭包相关面试题:1. var a=0,b=0; function A(a){ A=function(b){console.log(a+b++);}; console.log(a); } A(1); A ...

  10. 命令查看服务器SN号

    今天工作的时候,为了检查一台服务器的序列号,没必要在跑到机房里了,所以在系统下就可以看机器序列号了.如下: 1.linux取序列号: 命令执行:dmidecode |grep "Serial ...