入口：

entry: {

page1: "./page1",

page2:["./entry1","./entry2"]

}

把前面的二個使用方法結合使用。對象的key是作為打包成的文件的名稱，所以有多少個key，就代表打包成多少個文件。

出口：

output: {

path: path: path.join(__dirname,'/public/dist'),

filename: 'static/js/[name].[chunkhash:8].js',

publicPath: publicPath

}

path：打包后的js文件存放地址。

filename：文件名稱；如果前面有/開始的，webpack自動幫你生成目錄；[name]就是entry中的key，[chunkhash:8]自動幫你加上hash。

publicPath：在你網(wǎng)站運行時候可能你訪問的資源地址（image，url等）可能不是你打包的目錄（path）,publicPath就是在path前加上一段；可以是目錄，也可以是CDN地址

插件CommonsChunkPlugin

一般會把jQuery、react、angular等框架或者庫打包成一個文件，因為不會經(jīng)常更改，可以長時間的緩存在用戶的瀏覽器上。

插件ExtractTextPlugin

webpack把css也當成模塊，在js中可以import css文件，所以html中不需要手動去加css，當這個js加載時候，會幫你把css包裹在style標簽中插入頁面。但是這個使用場景也是極少的，你還是需要把css生成文件的。

webpack-dev-server

一個npm的包，需要安裝。

開發(fā)時候你需要運行你的應用，就需要一個server，webpack-dev-server其實就是封裝了express的一個server，里面又使用了一個中間件webpack-dev-middleware來把webpack編譯的文件放在內(nèi)存中，請求資源時候都是從內(nèi)存中取，編譯過程也是在內(nèi)存中運行，所以速度非?？?。

熱替換react-hot不刷新瀏覽器

常用Plugins介紹

代碼熱替換,HotModuleReplacementPlugin

生成html文件，HtmlWebpackPlugin

將css成生文件，而非內(nèi)聯(lián)，ExtractTextPlugin

報錯但不退出webpack進程，NoErrorsPlugin

代碼丑化，UglifyJsPlugin，開發(fā)過程中不建議打開

多個html共用一個js文件(chunk)，可用CommonsChunkPlugin

清理文件夾，Clean

調(diào)用模塊的別名ProvidePlugin，例如想在js中用$，如果通過webpack加載，需要將$與jQuery對應起來

壓縮：http://www.qingpingshan.com/jb/javascript/175812.html

newwebpack.DefinePlugin({ // <--減少React大小的關鍵

'process.env': {

'NODE_ENV': JSON.stringify('production')

}

}),

newwebpack.optimize.DedupePlugin(),//刪除類似的重復代碼

newwebpack.optimize.UglifyJsPlugin(),//最小化一切

newwebpack.optimize.AggressiveMergingPlugin()//合并塊

//在生產(chǎn)環(huán)境服務端gzip壓縮文件

newCompressionPlugin({

asset: "[path].gz[query]",

algorithm: "gzip",

test: /\.js$|\.css$|\.html$/,

threshold: 10240,

minRatio: 0.8

})