loader: 因为webpack自身只能处理JavaScript，使用loader可以处理非JavaScript的文件。
全局安装
npm install webpack webpack-cli –g
本地安装
npm install webpack webpack-cli --save-dev
版本查看
webpack -v
创建package.json文件
npm init -y
打包命令
webpack --config config/webpack.config.js
https://www.ibm.com/developerworks/cn/opensource/os-nodejs/
NPM是什么？
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装
1. npm 命令安装模组
$ npm install <Module Name>
模块安装完成之后， 就可以使用了。类似express 模块
$ npm install express
var express = require('express');
2. 全局安装与本地安装
npm install express # 本地安装
npm install express -g # 全局安装
命令的差别就是后面是否 加 -g 参数
本地安装，安装的目录是在命令行所在目录， 可以使用require()来引入
全局安装，是安装在node的安装目录， 全局目录可以设置。 可以直接在命令行使用而不使用require导入
3.package.json
package.json 位于模块的目录下，用于定义包的属性。
Package.json 属性说明
name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
keywords - 关键字
4. 查看安装信息
$ npm list -g
5.卸载模块
$ npm uninstall 模块名
6. 更新模块
$ npm update 模块名
7. 搜索模块
$ npm search 模块名
NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。
NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。
使用npm help <command>可查看某条命令的详细帮助，例如npm help install。
在package.json所在目录下使用npm install . -g可先在本地安装当前命令行程序，可用于发布前的本地测试。
使用npm update <package>可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。
使用npm update <package> -g可以把全局安装的对应命令行程序更新至最新版。
使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。
使用npm unpublish <package>@<version>可以撤销发布自己发布过的某个版本代码。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
$ cnpm install [name]
Node.js REPL
上面使用的交互方式执行nodejs还有一个专业的名字， REPL.
Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境，类似 Window 系统的终端或 Unix/Linux shell，我们可以在终端中输入命令，并接收系统的响应。
Node 自带了交互式解释器，可以执行以下任务：
读取 - 读取用户输入，解析输入了Javascript 数据结构并存储在内存中。
执行 - 执行输入的数据结构
打印 - 输出结果
循环 - 循环操作以上步骤直到用户两次按下 ctrl-c 按钮退出。
Node 的交互式解释器可以很好的调试 Javascript 代码。
可以使用交互解释器主要做：
1. 简单的表达式运算
10-5
2. 使用变量
x=10
y=20
x+y
3. 多行表达式
var x=0
do{
x++
console.log("x="+x);
}while(x<5);
4.下划线(_)变量
可以使用下划线(_)获取上一个表达式的运算结果
这和shell脚本的用法很类似。
REPL 命令
ctrl + c - 退出当前终端。
ctrl + c 按下两次 - 退出 Node REPL。
ctrl + d - 退出 Node REPL.
向上/向下 键 - 查看输入的历史命令
tab 键 - 列出当前命令
.help - 列出使用命令
.break - 退出多行表达式
.clear - 退出多行表达式
.save filename - 保存当前的 Node REPL 会话到指定文件
.load filename - 载入当前 Node REPL 会话的文件内容。
Nodejs 回调
Node.js 异步编程的直接体现就是回调。
异步编程依托于回调来实现，但不能说使用了回调后程序就异步化了。
回调函数在完成任务后就会被调用，Node 使用了大量的回调函数，Node 所有 API 都支持回调函数。
1. 创建一个测试文件nodefile.txt ， 内容如下
This is Test File for Nodejs....
2. 创建同步阻塞的例子 sync.js
var fs = require("fs");
var data = fs.readFileSync('nodefile.txt');
console.log(data.toString());
console.log("It's End!");
3. 创建异步回调的例子
var fs = require("fs")
fs.readFile("nodefile.txt",function(err,data){
if(err) return console.error(err);
console.log(data.toString());
});
console.log("It's End!");
同步和异步执行结果的差别是，
同步是把文件内容读完之后， 在继续后面的
异步不需要文件内容读完， 后面的就开始执行。
grunt是一套前端自动化工具，是一个基于nodeJs的命令行工具。对于需要反复重复的任务，例如压缩、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。
Grunt和所有grunt插件都是基于nodejs来运行的
?https://nodejs.org/?
grunt-CLI
“CLI”被翻译为“命令行”。要想使用grunt，首先必须将grunt-cli安装到全局环境中，使用nodejs的“npm install…”进行安装。
Linux 安装
1. 下载
2、下载完成后用ftp上传到Linux任意文件夹即可。我的是/usr/local。然后进入到此文件夹。
cd /usr/local
1
3、在此目录下解压
#tar xf node-v8.3.0-linux-x64.tar.xz
1
4、解压后进入到解压后的文件夹。
#cd node-v8.3.0-linux-x64
1
5、设置node和npm为全局变量。
#ln -s /home/chuan/chuansoft/node-v8.3.0-linux-x64/bin/node /usr/local/bin/node
#ln -s /home/chuan/chuansoft/node-v8.3.0-linux-x64/bin/npm /usr/local/bin/npm
1
2
6、随便进入到其他文件夹测试。
#node -v
#npm -v
verbose stack Error: docdokuplm@1.1.0 predev: `npm install && node_modules/.bin/bower install`
没有bowser
verbose stack Error: docdokuplm@1.1.0 predev: `npm install && node_modules/.bin/bower install`
12 verbose stack Exit status 1
12 verbose stack at EventEmitter.<anonymous> (D:\inssoftware\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:283:16)
12 verbose stack at emitTwo (events.js:126:13)
12 verbose stack at EventEmitter.emit (events.js:214:7)
12 verbose stack at ChildProcess.<anonymous> (D:\inssoftware\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
12 verbose stack at emitTwo (events.js:126:13)
12 verbose stack at ChildProcess.emit (events.js:214:7)
12 verbose stack at maybeClose (internal/child_process.js:925:16)
12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
13 verbose pkgid docdokuplm@1.1.0
14 verbose cwd D:\software\003-PLM\docdoku-web-front-dev
15 verbose Windows_NT 6.1.7601
16 verbose argv "D:\\inssoftware\\nodejs\\node.exe" "D:\\inssoftware\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
17 verbose node v8.11.1
18 verbose npm v5.8.0
19 error code ELIFECYCLE
npm config set prefix D:\inssoftware\nodejs\
npm config set cache D:\inssoftware\nodejs\node_cache" //可有可无
npm config get prefix
C:\Users\{UserName}\.npmrc 删除这个文件，就删除以上配置了
node_global用于安装全局的模块，如果不设置的话，Win7 默认安装在
C:\Users\{UserName}\AppData\Roaming\npm\node_modules
NPM
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入?"npm -v"?来测试是否成功安装。命令如下，出现版本提示表示安装成功:
npm 安装 Node.js 模块语法格式如下：
$ npm install <Module Name>
安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过?require('express')?的方式就好，无需指定第三方包路径。
npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已，比如
npm install express # 本地安装
n
npm install express -g # 全局安装
如果出现以下错误：
npm err! Error: connect ECONNREFUSED 127.0.0.1:8087
解决办法为：
$ npm config set proxy null
卸载模块
我们可以使用以下命令来卸载 Node.js 模块。
$ npm uninstall express
更新模块
我们可以使用以下命令更新模块：
$ npm update express
搜索模块
使用以下来搜索模块：
$ npm search express
创建模块
创建模块，package.json 文件是必不可少的。我们可以使用 NPM 生成 package.json 文件，生成的文件包含了基本的结果。
接下来我们就用以下命令来发布模块：
$ npm publish
NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。
使用npm help <command>可查看某条命令的详细帮助，例如npm help install。
在package.json所在目录下使用npm install . -g可先在本地安装当前命令行程序，可用于发布前的本地测试。
使用npm update <package>可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。
使用npm update <package> -g可以把全局安装的对应命令行程序更新至最新版。
使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。
使用npm unpublish <package>@<version>可以撤销发布自己发布过的某个版本代码。
npm run XXX是执行配置在package.json中的脚本，比如：
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
}
只有这里配置了，你才能run，所以不是所有的项目都能npm run dev/build。要了解这些命令做了什么，就要去scripts中看具体执行的是什么代码。这里就像是一些命令的快捷方式，免去每次都要输入很长的的命令（比如unit那行）。
模块：
1. Polymer
释放组件的力量，Polymer是一个可以帮助你创建自定义的可重用的HTML元素的JavaScript库，可以用来构建高性能，可维护的app
2.bower
bower 的话，从一开始，就是专门为前端表现设计的包管理器，一切全部为前端考虑的。npm 和bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由程序员自己解决）。
现在不建议使用bower了。官方已经停止维护，建议直接使用npm就可以了
$ polymer serve --port 8080
Polymer CLI是一个命令行界面，用于使用Polymer App Toolbox构建具有Polymer和应用程序的元素。 它简化了您的工作流程，使您可以轻松管理从简单组件到复杂Web应用程序的项目。
1.
windows 命令行看一下是否安装了 polymer-cli
npm search polymer-cli
如果没有安装的话， 使用 npm install -g polymer-cli 进行安装
2. 建立项目目录
D:\devworkspace\nodejs\polymer-app
polymer-app
3. 切换到项目目录， 初始化项目 ：
polymer init
选择需要的模板后， 回车， 这里选择3.0 简单的元素模板
4. 启动服务
polymer serve --port 8080
以下添加vaadin的Checkbox进来
下载vaadin的checkbox包
npm i @vaadin/vaadin-checkbox --save
到demo目录，修改 index.html
加上 import '@vaadin/vaadin-checkbox/vaadin-checkbox.js';
html 加上
<vaadin-checkbox checked>I agree with <a href>Terms & Conditions</a></vaadin-checkbox>
进入以下地址：
http://127.0.0.1:8080/components/polymer-app/demo/
npm 是伴随Node.js 出现的一个包管理器，最开始只能支持 Node.js 的模块管理，但是后来， npm官网经过一次改版，打出的口号是javascript 的包管理器，所以，其已经不在局限于是Node.js 的模块管理了，已经通用到了所有 js 的包管理工具了，可以说，前后通吃了。
bower 的话，从一开始，就是专门为前端表现设计的包管理器，一切全部为前端考虑的。npm 和bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由程序员自己解决）。
现在不建议使用bower了。官方已经停止维护，建议直接使用npm就可以了。
Node.js、npm和yarn
Node.js, 运行在服务端的JavaScript环境， 相当于Java虚拟机(JRE)的作用。
npm： 包管理工具， 作用类似于Maven。在安装Node.js时会一并安装
yarn： 作用于npm类似， 但比npm更好用， 需要额外安装。
Windows 下安装
下载地址：
https://yarnpkg.com/zh-Hans/docs/install#windows-stable
安装成功验证
yarn --version
yarn install
在本地?node_modules?目录安装?package.json?里列出的所有依赖。
yarn install --no-lockfile
不读取或生成?yarn.lock?锁文件。
淘宝镜像
npm 方式
n
npm config set registry https://registry.npm.taobao.org --global
n
npm config set disturl https://npm.taobao.org/dist --global
y
yarn 方式
y
yarn config set registry https://registry.npm.taobao.org --global
y
yarn config set disturl https://npm.taobao.org/dist --global
- 0. 前言
- 1. 基础篇
- Node.js 入门介绍与安装
- Node.js运行模式与入门实例
- npm介绍及与Node.js关联
- Webpack 快速介绍及入门示例
- 模块
- webpack
- gulp
- 2. 进阶篇
- Node.js与Apache比较
- Node.js VS JavaScript
- CommonJS、AMD、CMD与ES6
- 3. 框架篇
- Node.js之Express快速介绍与入门示例
- 4. 实战篇
- 调试器监听
- webpack入门示例
- 5. 补充篇
- 语法
- 前端包管理工具：npm、cnpm、yarn
- 6. 问题解决篇
- webpack之options has an unknown property ‘contentBase‘. These properties are valid: