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-dev

css-loader 加载器安装 npm install css-loader --save-dev

Gulp全局安装 npm install -g gulp

webpack 打包命令

webpack --display-error-details

webpack 升级后，extensions 数组中不能使用空字符串，需要使用* 代替。
否则报错

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

参考文档：https://github.com/webpack/webpack/issues/3043

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

最终项目结构：

webpack命令行常见使用的操作

安装 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帮忙文档