Node.js学习

简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。安装方法：http://www.runoob.com/nodejs/nodejs-install-setup.html检查node.js是否安装完成：输入node 进入.exit退出NPM 包管理工具>npm -v 查看npm版本
5.5.1

>npm install npm -g 升级包管理工具

1、npm install webpack -g  安装webpack 模块打包工具

webpack

常用命令

构建命令，webpack的常用参数

$ webpack --config webpack.min.js //另一份配置文件

$ webpack --display-error-details //显示异常信息

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

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

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

2、项目下添加 webpack.config.js 文件

参考教程：http://www.cnblogs.com/tugenhua0707/p/4793265.html
　　　　  http://www.cnblogs.com/wdlhao/p/5801918.html 

webpack.config.js代码：

var path = require('path');
module.exports = {
entry: __dirname +"/index.js",
output: {
filename: "build.js",
path: __dirname +'/build'
},
module: {
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{
test: /\.css$/, use: [
'style-loader',
'css-loader'
] },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: "jsx-loader" }
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: []
};

jsx-loader加载器安装 npm install jsx-loader --save-devcss-loader 加载器安装 npm install css-loader --save-devGulp全局安装 npm install -g gulp[b]webpack 打包命令[/b] webpack --display-error-detailswebpack 升级后，extensions 数组中不能使用空字符串，需要使用* 代替。
否则报错

Getting error: configuration.resolve.extensions[0] should not be empty

1
I am not sure that this is correct but after a series of trial an error I have tried using the * symbol instead of an empty string. This seems to have fixed the problem.So final syntax for the extensions attribute:extensions: [‘*’, ‘js’, ‘ts’]总结 webPack把CSS、js、图片打包到js最终项目结构：[b]webpack命令行常见使用的操作[/b]
安装

webpack

后，可以使用

webpack

这个命令行工具。主要命令：

webpack <entry> <output>

。可以切换到包含webpack.config.js的目录运行命令：webpack: 启动 执行一次开发时的编译webpack -w:如果你想当改变一个文件而让webpack实时编译webpack -p: 执行一次生成环境的编译（压缩）webpack -d:对文件进行解压缩，提供source map，方便调式代码方便调试文件webpack --config customconfig.js:如果你想把默认的配置文件webpack.config.js改成自定义文件webpack --watch :在开发时持续监控增量编译（很快）webpack --display-error-details 显示更多报错信息webpack --display-chunks 展示编译后的分块webpack --colors 显示静态资源的颜色webpack --progress 显示编译进度webpack --display-reasons 显示更多引用模块原因webpack --profile 输出性能数据，可以看到每一步的耗时webpack --display-modules 默认情况下node_modules下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块webpack --sort-chunks-by,--sort-assets-by,--sort-modules-by 将modules/chunks/assets进行列表排序webpack -help，查看webpack帮忙文档