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. Mvc 拼接Html 导出 Excel（服务器不用安装呦！支持2007以上版本）

    新公司,新接触,老方法,更实用. 之前接触过Webform,winfrom 的导出Excel方法 ,优点:省事.缺点:服务器必须安装Office 这几天做项目 和 大牛学习了一下 新的方法,自己加以总 ...

  2. 【Xamarin报错】visual studio android 模拟器部署卡住

    模拟器启动成功,但是部署一直等待中,没有反应. 1>Starting deploy 5" KitKat (4.4) XXHDPI Phone ...1>Starting emul ...

  3. 转载好文：如何进行基于情境数据的个性化EDM数据营销

    根据Adobe和DMA(Direct Marketing Association)的<实时营销洞察报告> (Real-Time Marketing Insights Study),77%的 ...

  4. [转]Android开发最佳实践

    ——欢迎转载,请注明出处 http://blog.csdn.net/asce1885 ,未经本人同意请勿用于商业用途,谢谢—— 原文链接:https://github.com/futurice/and ...

  5. SNF开发平台WinForm之九-代码生成器使用说明-SNF快速开发平台3.3-Spring.Net.Framework

    下面就具体的使用说明: 1.获取代码生成器的授权码(根据本机)-----还原数据库-------改config-----代码生成器 改代码生成器Config 2.登录代码生成器 3.查看是否连接成功 ...

  6. Ext.js中的tip事件实际使用

    Ext.onReady(function () { // Init the singleton. Any tag-based quick tips will start working. Ext.ti ...

  7. [Linux] zip 与 unzip 命令

    zip zip 命令基本格式为: zip options archive inpath inpath ... archive 是 .zip 文件(新的或已经存在的). inpath 是需要打包的目录或 ...

  8. Java 集合系列02之 Collection架构

    概要 首先,我们对Collection进行说明.下面先看看Collection的一些框架类的关系图: Collection是一个接口,它主要的两个分支是:List 和 Set. List和Set都是接 ...

  9. selenium webdriver (python) 第二版

    前言 对于大多软件测试人员来讲缺乏编程经验(指项目开发经验,大学的C 语言算很基础的编程知识)一直是难以逾越的鸿沟,并不是说测试比开发人员智商低,是国内的大多测试岗位是功能测试为主,在工作时间中,我们 ...

  10. 使用DirectWrite测量Direct2D文字大小

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 最近在使用Direct2D和DirectWrite写引擎,在引擎中需要实现文本标签控件.但是文本标签的尺寸最好不 ...