webpack基礎用法

----------webpack的用法全在配置中！！
webpack是在node環境下運行的，學習webpack以前，請先自行安裝node環境（含npm）；

安裝webpack：

第一步：
    npm install -g webpack       //全局安裝
第二步：
    創建項目文件夾，如「demo」
    cd demo
    npm init    //一直回車下去
    npm install webpack --save-dev    //項目目錄本地安裝

搭建目錄結構

在項目根目錄「demo」下的簡單目錄結構以下：
    --app
        --index.js    //入口文件
    --node_modules    //安裝modules時，自動創建
    --tem    //HTML模板文件夾
        --index.html
    --webpack.config.js    //自建，不會自動生成；通常會有開發和發佈兩種配置文件
    --package.json    //由npm init時自動創建

webpack簡單配置：

webpack的用法所有都在webpack.config.js中；其餘地方不要夾雜webpack配置的內容；

//webpack.config.js寫入如下內容
    //引入內置功能模塊(不須要另行安裝)；
    var path = require('path'); 
    var webpack = require('webpack');
    //引入第三方功能模塊（須要另行安裝）；

//關於第三方模塊的用法，強烈建議直接看文檔；

var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    //定義經常使用路徑變量；   
    //返回當前文件（webpack.config.js）所在位置
    var ROOT_PATH = path.resolve(__dirname); 
    var APP_PATH = path.resolve(ROOT_PATH,'app');    //拼接路徑；
    var TEM_PATH = path.resolve(ROOT_PATH,'tem');
    var BUILD_PATH = path.resolve(ROOT_PATH,'build');
    
    module.exports = {
        entry : {
            //入口文件
            app : APP_PATH,
            vendors : ['react','react-dom']
        },
        output : {
            //產出路徑；
            path : BUILD_PATH,
            filename : '[name].js'    
        },
        module : {
            //一切資源(images/css/js...)皆模塊，一切須要loader解析；
            loaders : [
                {test:/\.js?$/,
                    loader:'jsx',
                    exclude:/node_modules/}
            ]
        },
        plugins : [
            //生成HTML文件；
            new HtmlWebpackPlugin({
                title : 'Hello world app!',
                template : path.resolve(TEM_PATH,'index.html'),
                filename : 'index.html',
                chunks : ['vendors','app'],
                inject : 'body',
                // chunksSortMode : "none"
            }),
            new webpack.HotModuleReplacementPlugin()    //保證明時刷新；
        ],
        devServer:{
            //實時刷新，須要inline model和hot:true
            histroyApiFallback : true,
            hot : true,
            inline : true,
            progress : true
        }
    }

注意：webpack分析webpack.config.js中的entry file到其餘文件中查找依賴，全部文件被包含在bundle.js中；

webpack給每一個module（注意：全部文件都是module，包括經過loaders進來的圖片、css等）一個獨立id；並使全部module在bundle.js中能夠經過id訪問；

啓動時，只有entry chunk被執行；

webpack支持CMD和AMD規範，但不要在入口文件中使用AMD規範，會報錯；

Development Server:

//Webpack搭建本地服務器，監聽文件改變，整個頁面實時更新；可是不會輸出結果文件到磁盤，適於生產環境下調試；

//webpack-dev-server調用的腳本文件不是output的文件，而是保存在內存中的文件……目前引用的方法只知道用Html-webpack-plugin自動生成html頁面來引用；

經常使用配置：

    plugins : [
        //保證明時更新，須要啓用內置的HotModuleReplacementPlugin插件；
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        //server切換到inline model
        histroyApiFallback : true,
        hot : true,
        inline : true,
        progress : true
    }

注意：webpack-dev-server容許內網訪問------設置host 0.0.0.0
//webpack-dev-server是實現頁面總體刷新；

//在package.json文件中配置"script"腳本設置快捷命令方式
//如下命令行參數不要和上邊webpack.config.js中的配置有交集，好像會報錯；
"scripts": {
    "start":"webpack-dev-server --colors --host 0.0.0.0 --port 8080"
  }
  使用命令行模式npm run start運行webpack-dev-server；

使用不一樣的配置build項目：

//根據需求綁定不一樣的配置文件並設置scripts腳本運行方式；
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
    "build": "webpack --progress --colors --config webpack.production.config.js"
  }

本人是初學者，有問題但願你們一塊兒探討，共同進步，謝謝；

實踐是檢驗真理的惟一標準；能夠看着入口文件和webpack.config.js，猜想應該出現的結果，而後再執行一下，檢驗一下；
推薦一篇文章：