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 升级包管理工具



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

webpack

经常使用命令

构建命令，webpack的经常使用参数

$ webpack --config webpack.min.js //另外一份配置文件 $ webpack --display-error-details //显示异常信息 $ webpack --watch //监听变更并自动打包 $ webpack -p //压缩混淆脚本，这个很是很是重要！ $ webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了

二、项目下添加 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 

• 1

参考文档：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帮忙文档