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

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