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. strcpy和memcpy的区别

    strcpy和memcpy都是标准C库函数,它们有下面的特点.strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容之外,还会复制字符串的结束符. 已知strcpy函 ...

  2. MSIL 教程（三）：类和异常处理（转）

    转自:http://www.cnblogs.com/Yahong111/archive/2007/08/16/857771.html 续上文[翻译]MSIL 教程(二):数组.分支.循环.使用不安全代 ...

  3. 将在本地创建的Git仓库push到Git@OSC

    引用自:http://my.oschina.net/flan/blog/162189 在使用git 处理对android的修改的过程之中总结的.但不完善 Git push $ git push ori ...

  4. angularjs + seajs构建Web Form前端(三) -- 兼容easyui

    回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使用,对于angular也有了初步的认识,接下来的内容只会对angular的一些用法做简单的 ...

  5. Xenia and Divisors

    Xenia and Divisors time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  6. c++ 相关的技术资源整理归类

    最近一段时间 c++ 社区里最火热的话题莫过于 cppcon2015 了, isocpp 上一堆相关的新闻,其中有一个页面罗列了该会议的全部主题, 匆匆一瞥几乎眼花缭乱,为期一个星期的会议竟有上百个演 ...

  7. 【PRML读书笔记-Chapter1-Introduction】1.6 Information Theory

    熵 给定一个离散变量,我们观察它的每一个取值所包含的信息量的大小,因此,我们用来表示信息量的大小,概率分布为.当p(x)=1时,说明这个事件一定会发生,因此,它带给我的信息为0.(因为一定会发生,毫无 ...

  8. SNF开发平台WinForm之八-自动升级程序部署使用说明-SNF快速开发平台3.3-Spring.Net.Framework

    9.1运行效果: 9.2开发实现: 1.首先配置服务器端,把“SNFAutoUpdate2.0\服务器端部署“目录按网站程序进行发布到IIS服务器上. 2.粘贴语句,生成程序 需要调用的应用程序的Lo ...

  9. 什么是作用域链，什么是原型链，它们的区别，在js中它们具体指什么？

    什么是作用域链,什么是原型链. 作用域是针对变量的,比如我们创建了一个函数,函数里面又包含了一个函数,那么现在就有三个作用域 全局作用域==>函数1作用域==>函数2作用域 作用域的特点就 ...

  10. ruby -- 进阶学习（一）subdomain配置与实现

    今天和guanMac童鞋研究的subdomain配置终于有点头绪~~ 之所以会遇到种种难题,个人总结了一下,第一本人太菜,第二英语不好 贴一下guanMac童鞋配置小结的链接:http://my.eo ...