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. IOS内存管理学习笔记

    内存管理作为iOS中非常重要的部分,每一个iOS开发者都应该深入了解iOS内存管理,最近在学习iOS中整理出了一些知识点,先从MRC开始说起. 1.当一个对象在创建之后它的引用计数器为1,当调用这个对 ...

  2. How to debug Typescript in browser

    How to debug typescript, In Chrome, we need to press F12, open settings, uncheck the Enable JavaScri ...

  3. Android SDK Manager无法显示可供下载的未安装SDK解决方案

    FAQ: 问下的 我的ANDROID SDK MANAGER里原来下载了一些SDK,但是我现在想重新下载新的SDK,咋Packages列表没显示呢?该怎么办? Answer: 据说dl-ssl.goo ...

  4. ASP.NET MVC 4 Web编程

    http://spu.jd.com/11309606.html 第1章 入门第2章 控制器第3章 视图第4章 模型第5章 表单和HTML辅助方法第6章 数据注解和验证第7章 成员资格.授权和安全性第8 ...

  5. [CS231n-CNN] Convolutional Neural Networks: architectures, convolution / pooling layers

    课程主页:http://cs231n.stanford.edu/     参考: 细说卷积神经网络:http://blog.csdn.net/han_xiaoyang/article/details/ ...

  6. java攻城狮之路(Android篇)--BroadcastReceiver&Service

    四大组件:activity 显示. contentProvider 对外暴露自己的数据给其他的应用程序.BroadcastReceiver 广播接收者,必须指定要接收的广播类型.必须明确的指定acti ...

  7. 测试GeoGebra博客

    已知函数 \(\textit{f}(\textit{x})=2\textit{m}\ln\textit{x}-\textit{x}^2\), \(\textit{g}(\textit{x})=\tex ...

  8. 基于MSP430F413水果电池供电的低功耗时钟

      我最早接触MSP430时候,看到书的第一页就是一张水果电池的图片,一直以来想做一个低功耗的可以水果电池供电的系统,毕业之后的下半年选择MSP430F413单片机来画了一个低功耗的板子,一直没有调试 ...

  9. 【转】mysql如何跟踪执行的sql语句

    转自http://blog.csdn.net/testcs_dn/article/details/18791815 在SQL SERVER下跟踪sql采用事件探查器,而在mysql下如何跟踪sql呢? ...

  10. 使用TFS+GIT实现分布式项目管理

    前言 GIT是近来很流行的一种版本控制系统,是Linux内核之父Linus Torvalds为了管理Linux内核的开发而开发的一种开源的版本控制工具. GIT相比传统的版本控制工具最大的优点是实现了 ...