一.模块打包机

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. redis中的事务

    首先明白在java中线程和进程的区别: 1.什么是多线程? 是指一个应用程序同时执行多个任务,一般来说一个任务就是一个线程 ,而一个应用程序有一个以上的线程我们称之为多线程. 2.什么是进程? 进程是 ...

  2. Mybatis的mapper文件引起模块划分的思考

    起因:项目中将公用的代码抽离到单独一个项目 cms-common.jar (注:公用的代码不只是工具类代码,包含service和dao等) 构建:每次构建项目 cms.war 的时候,需要引入cms- ...

  3. MyBatis之ObjectFactory

    关于在MyBatis中的ObjectFactory有什么用,在官方文档中有这样的描述(大多数网上的博客都是直接引用这一描述):MyBatis 每次创建结果对象的新实例时,它都会使用一个对象工厂(Obj ...

  4. CMD和seaJS

    前面的话 CMD(Common Module Definition)表示通用模块定义,该规范是国内发展出来的,由阿里的玉伯提出.就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,Se ...

  5. Natas Wargame Level 3 Writeup 与 robots.txt

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnsAAAC5CAYAAABQi/kBAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  6. 在Linux下的找不同-打补丁

    Q:为什么要找不同,为什么要打补丁? A: 在Linux应用中,作为DBA,我们知道MySQL跑在Linux系统之上,数据库最重要的追求就是性能,"稳"是重中之重,所以不能动不动就 ...

  7. EntityFramework6.X之概述

    实体框架(EF6.X)是一种对象/关系映射器(O/R Mapping解决方案),一套支持开发面向数据的软件应用技术,采用特定域对象和关系数据形式使用数据,而不必考虑存储这些数据的基础数据库表和列,上层 ...

  8. redis入门指南-附录B

  9. dns劫持分析

    最近在做dns解析,关注的重点在查询域名ns记录上,异常日志中捕获到一个域名,dig查询: 查询请求类型为ns,dig结果确只有一条A记录.处于好奇,查询类型改为a类型: 这个域名dig 查询A记录, ...

  10. 乐视开放平台技术架构-servlet和spring mvc篇

    在乐视风口浪尖的时候,敢于站出来说我是乐视的而不怕被打脸的,也就是我了.就算我以后不在乐视了,提起来在乐视工作过,我也还是挺骄傲的.因为这是一个有理想,敢拼敢干的公司.想起复仇者联盟里Fury指挥官的 ...