webpack-dev-server輕量級js高速打包、熱部署伺服器

標籤：外掛程式   目的   ack   熱部署   變化   空格   web   pack   htm   

webpack是一個打包web項目的工具 ，可以實現css，js，less，cass，html的混淆加密，minify，結合webpack-dev-server熱部署，非常方便前端頁面和Nodejs的開發。

 

webpack

安裝方法

npm install webpack --save-dev 

npm install webpack-dev-server --save-dev

 

執行webpack需要在項目目錄有一個設定檔 webpack.config.js 。 

var webpack = require(‘webpack‘);module.exports = {    entry:{        index:‘./src/index.js‘,        vendor: [          ‘react‘,          ‘react-dom‘,          ‘react-redux‘        ]},    output:{        path:‘./bin‘,        filename:‘app.bundle.js‘,        publicPath:‘/bin‘    },        module:{        loaders:[{            test:/\.js$/,            exclude:/node_modules/,            loader:‘babel‘,            query: {                presets: [‘es2015‘, ‘stage-0‘, ‘react‘]            }        }]    },    plugins: [      new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")    ]}

 

上面的 entry 表示入口檔案，webpack會自動關聯出此js檔案引用的其他js檔案。可以設定為一個數組，表示多個入口。

自己寫的代碼打包存放的位置在output中指定了相對路徑./bin/app.bundle.js。

vendor 指出其中使用的第三方js，

便於下方plugins使用CommonsChunkPlugin把自己編寫的代碼和第三方代碼分開，此外掛程式建構函式中指定了是哪個vendor，以及處理後的儲存位置。

 

modules 中的配置的loaders用於執行順序從右至左，類似管道依次處理test參數匹配到的js檔案、css檔案。

 

webpack好用的的參數 

-p 或者 --optimize-minimize 實現去空格壓縮

-d 產生js.map檔案，便於對應源碼位置 

-- hot  啟用熱部署，不用重新整理網頁

--watch 觀察檔案變化自動重新webpack ，啟動webpack-dev-server時不使用這個參數也可以自動觸發webpack

 

webpack-dev-server輕量級js高速打包、熱部署伺服器