webpack的学习
webpack是什么？
1：加载模块（将JS、sass/less、图片等作为模块来处理使用） 2：进行打包
webpack的优势？
1：webpack以commonJS（JS的规范）的形式写脚本
2：模块化（JS、css、图片等）
3：开发便捷（进行打包、压缩、图片转base64等）
4：扩展性强，插件机制完善

webpack安装：
1：npm方式安装：npm install webpack (若是想将项目依赖写入package.json中，依次执行npm init 和npm install webpack --save--dev,就会在init创建的package.json中看到依赖的模块）
2：npm info webpack //查看webpack的信息
若是需要使用webpack工具，需要下载server：npm install webpack-dev-server --save-dev

webpack小例子：
1、创建index.html如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack学习</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
2、创建入口的JS：entry.js
document.write('It works.')
3、输入打包命令：webpack entry.js bundle.js
4、浏览器打开index.html（会显示：It works.），此时bundle.js也被打包创建成功
5、测试多个JS，创建module.js 和module1.js:
module.js: module.exports = 'It works from module.js.'
module1.js: module.exports = 'My name is webpack!'
修改入口entry.js：
document.write('It works.')
document.write(require('./module1.js'))
document.write(require('./module.js'))
再次执行打包命令：webpack entry.js bundle.js
浏览器打开index.html就会显示：It works.My name is webpack!It works from module.js.
若是修改入口entry.js：
document.write(require('./module1.js'))
document.write(require('./module.js'))
document.write('It works.')
执行打包命令后就会显示：My name is webpack!It works from module.js.It works.
小结：webpack会分析入口文件entry.js，解析包含依赖关系的各个文件，这些文件都会打包到html引入的JS（bundle.js）中。
webpack会给每个模块分配一个唯一的ID，通过这个ID索引访问模块。页面启动的时候，会先执行入口文件entry.js代码的顺序依次加载。

webpack-----loader（各种模块css、图片的处理）
webpack本身只能处理JS模块，若是需要处理其他类型的文件（css、图片之类的），需要用到关键字loader
loader需要通过npm命令安装：npm install css-loader style-loader//css的loader安装

loader可以作为模块和资源之间的转换器,是管道式处理方式，不管最初和中间的形式，
最后返回的必须是javascript，因为是在node环境中执行的。loader是一个函数，接收源文件作为参数，返回转换的结果。
就可以用require来加载任何类型的模块、文件。
需要注意的是在entry.js中引入需要这么写:require("!style!css!./style.css") 执行命令：webpack entry.js bundle.js
require CSS 文件的时候都要写 loader 前缀（!style!css!），也可以这样写：require("./style.css") 执行命令：webpack entry.js bundle.js --module-bind "css=style!css"

webpack 操作除了在命令行操作，还可以通过配置文件来操作。
在工作区间新建一个webpack.config.js，webpack说简单点就是一个配置文件，主要分为三个模块。
entry:入口文件 webpack用哪个文件作为入口（本例子中用的是entry.js）
output:出口文件 webpack处理完成的文件放在哪里（本例子中是bundle.js）
module:模块 要用各种不同的模板来处理各种类型的文件（本例子中用的是css）
loaders中test里面包含一个正则，包含需要匹配的文件
loaders是一个数组，包含要处理这些程序的loaders，这里我们用了css和style，注意loaders的处理顺序是从右到左的
先运行css-loader然后是style-loade
如下：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ['style','css']
}
]
},
//还可以在配置文件中添加很多插件的配置，可以是webpack内置的插件也可以通过npm下载的插件。webpack内置插件的配置
plugins: [
new webpack.BannerPlugin('This file is created by qinbb')//在输出文件bundle.js中首行代码就是这句话
]
}

loader 功能
loader 管道：在同一种类型的源文件上，可以同时执行多个 loader ， loader 的执行方式可以类似管道的方式，管道执行的方式是从右到左的方式loader 可以支持同步和异步
loader 可以接收配置参数

loader 可以通过正则表达式或者文件后缀指定特定类型的源文件

插件可以提供给 loader 更多功能

loader 除了做文件转换以外，还可以创建额外的文件

webpack 一些命令：
webpack --progress --colors //环境运行 包括 进度 颜色
webpack --progress --colors --watch//开启监听模式，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译
webpack-dev-server --progress --colors //需要在全局和工作项目中都下载该包

webpack --display-error-details//方便出错时能查阅更详尽的信息

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch   //监听变动并自动打包

$ webpack -p    //压缩混淆脚本，这个非常非常重要！

$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

//开启webpack-dev-server服务，http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
实时监听是有条件的：
1、所有的文件在同一个目录下
2、简单css可以，但是css预编译器sass就做不到实时监控
webpack --display-error-details//打印错误日志

webpack学习（入门基础）的更多相关文章

  1. Python学习入门基础教程(learning Python)--5.6 Python读文件操作高级

    前文5.2节和5.4节分别就Python下读文件操作做了基础性讲述和提升性介绍,但是仍有些问题,比如在5.4节里涉及到一个多次读文件的问题,实际上我们还没有完全阐述完毕,下面这个图片的问题在哪呢? 问 ...

  2. webpack学习入门

    写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...

  3. Python学习入门基础教程(learning Python)--6.3 Python的list切片高级

    上节"6.2 Python的list访问索引和切片"主要学习了Python下的List的访问技术:索引和切片的基础知识,这节将就List的索引index和切片Slice知识点做进一 ...

  4. 强化学习入门基础-马尔可夫决策过程（MDP）

    作者:YJLAugus 博客: https://www.cnblogs.com/yjlaugus 项目地址:https://github.com/YJLAugus/Reinforcement-Lear ...

  5. angular学习-入门基础

    angular .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #00 ...

  6. Python学习入门基础教程(learning Python)--5.3 Python写文件基础

    前边我们学习了一下Python下如何读取一个文件的基本操作,学会了read和readline两个函数,本节我们学习一下Python下写文件的基本操作方法. 这里仍然是举例来说明如何写文件.例子的功能是 ...

  7. Python学习入门基础教程(learning Python)--3.3.3 Python逻辑关系表达式

    在if分支判断语句里的条件判断语句不一定就是一个表达式,可以是多个(布尔)表达式的组合关系运算,这里如何使用更多的关系表达式构建出一个比较复杂的条件判断呢?这里需要再了解一下逻辑运算的基础知识.逻辑关 ...

  8. Python学习入门基础教程(learning Python)--3.3.2 Python的关系运算

    如果if的condition不用布尔表达式来做条件判断而采用关系表达式,实际上关系表达式运算的结果要么是True要么是False.下面我们先了解一些有关关系运算符的基础知识,如下表所示. 做个小程序测 ...

  9. Python学习入门基础教程(learning Python)--5.1 Python下文件处理基本过程

    Python下的文件读写操作过程和其他高级语言如C语言的操作过程基本一致,都要经历以下几个基本过程. 1. 打开文件 首先是要打开文件,打开文件的主要目的是为了建立程序和文件之间的联系.按程序访问文件 ...

  10. Python学习入门基础教程(learning Python)--5.2 Python读文件基础

    上节简单的说明了一下Pyhon下的文件读写基本流程,从本节开始,我们做几个小例子来具体展示一下Python下的文件操作,本节主要是详细讲述Python的文件读操作. 下面举一个例子,例子的功能是读取当 ...

随机推荐

  1. ART：Android 摆脱卡顿的希望？

    与 iOS 相比,Android 的用户体验有个相对糟糕的开始.在很长的时间里,界面一直丑小鸭,卡顿也是挥不去的痛.不过,在 Google 的全力推动,以及硬件厂商的响应下,Android 还是跨越各 ...

  2. Microsoft 2013 新技术学习笔记 一

    有几年没有关注技术了,最近有点时间想把技术重新捡起来,借着重构手上的一个后台管理框架的机会将微软新的几种技术全部应用一下,从目的上来讲并没有希望能对涉及的技术有很深入的了解,所以这个系列的文章(篇幅不 ...

  3. 跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByTagName

    按照标签名获取元素 -- getElementsByTagName 标准 DOM 1在Element和Document两个interface中均有定义,原型NodeList getElementsBy ...

  4. 原生DOM探究 -- NodeList v.s. HTMLCollection

    涉及获取元素的主要API 在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard): Node及对应集合NodeList Element(继承Node)及对应集 ...

  5. Debian 基本设置

    在此做一下记录,省得以后再老是去搜索了 我的debian版本v:8.1.0 我是在Hyper-V中装的,启动后一直ping不通网址,后来才知道Debian不能直接ping域名,只能ping IP... ...

  6. java攻城狮之路(Android篇)--widget_webview_metadata_popupwindow_tabhost_分页加载数据_菜单

    一.widget:桌面小控件1 写一个类extends AppWidgetProvider 2 在清单文件件中注册: <receiver android:name=".ExampleA ...

  7. EHCACHE采用分布需要注意的地方

    分布式EHCACHE系统,有两种同步方式 方式1 :  RMI组播方式 这也是最常用的方式,配置简单,关键一点,各EHCACHE的节点配置都是一样的 原理:这样当缓存改变时,ehcache会向230. ...

  8. JS对象的几个方法介绍

    1.hasOwnProperty 判断是不是对象自身的属性,如果是继承的返回false否则true function Fn(){ } Fn.prototype.num = 10; var obj = ...

  9. 使用Service.Stack客户端编写redis pub sub的方法

    pub相对简单 client.PublishMessage("channel", "msg");   sub有2种方法 方法1 var subscription ...

  10. OP和DBA相关的一些有用资源

    最近国外blog上看到的一片资源分享博文,精而全,于是转帖分享 Must-Read Books List First of all, I would like to share a list of b ...