一.模块打包机

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. OC中@class的使用

    作用: 可以简单地引用一个类简单使用@class Dog; //类的引入 #import "Dog.h"仅仅是告诉编译器:Dog是一个类;并不会包含Dog这个类的所有内容 具体使用 ...

  2. #pragma mark指令的作用

    概述: 可以简单地给代码进行一个分组,方便代码的查找(可以不用记,无所谓的小东西) 例如: #pragma mark dog类的声明 @interface Dog :NSObject @end @im ...

  3. Mirantis MCP 1.0：OpenStack 和 Kubernetes 整合的第一步

    1.前言 Mirantis 公司在2014年9月14日宣布收购 TCPCloud,然后宣布在2017年第一季度会推出全新的私有云产品.从那时候开始,我就一直满怀期待.终于,今年4月19日,Mirant ...

  4. 关于爬楼梯的lintcode代码

    讲真的,这个我只会用递归去做,但是lintcode上面超时,所以只有在网上找了个动态规划的,虽然这个程序懂了,但是我觉得还是挺不容易的真正弄懂的话-- class Solution {public:  ...

  5. 新手上路---Java学习知识梳理

    我随笔 我相信也有那么一些人跟我一样,脱下军装后对未来感到迷茫,不知所措甚至怀疑起自己的能力,自身体会的经历过才能明白其中的辛酸!归咎一切:心态,信心,自信!再穷不过乞讨,不死终将出头.好了,闲言碎语 ...

  6. Java中的Classpath

    classpath实际上就是编译后的,以classes文件夹为起点的路径各种path获取到的路径的区别 Demo.class.getResource("");//得到的是Demo类 ...

  7. 如何实现在Windows上运行Linux程序，附示例代码

    微软在去年发布了Bash On Windows, 这项技术允许在Windows上运行Linux程序, 我相信已经有很多文章解释过Bash On Windows的原理, 而今天的这篇文章将会讲解如何自己 ...

  8. 机器学习：从编程的角度理解BP神经网络

    1.简介(只是简单介绍下理论内容帮助理解下面的代码,如果自己写代码实现此理论不够) 1) BP神经网络是一种多层网络算法,其核心是反向传播误差,即: 使用梯度下降法(或其他算法),通过反向传播来不断调 ...

  9. 2017年PHP培训机构排名

    2017年PHP培训机构排名 PHP培训属于IT培训的一个领域.随着互联网的火爆,PHP也变得异常火爆.通过对PHP培训机构的调查与了解,到底学员选择哪一家的PHP培训机构才能够学到真正的技术,PHP ...

  10. struts2.1.6教程九、文件上传下载（了解）

    首先建立struts2UpDownLoad项目,搭建好struts2基本的开发环境. 上传实例 步骤一:upload.jsp代码如下: <s:form action="upload&q ...