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幫忙文檔