第一種方式：在package.json進行設定；

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --content-base build --progress --host 127.0.0.1  --port 8080 --inline",

在module.exports的物件中進行配置；

const webpackServer = {
	protocol:'http://',
	host:'172.20.0.20',
	port:'3000'
}

devServer: {
	host: webpackServer.host,
	inline: true,
	port: webpackServer.port
	},
 

那麼package.json中檔案就不需要設定

historyApiFallback屬性：值為布林值；

需不需要在cmd命令中是否列印一連竄的輸出進度，只需要在package.json中配置progress就可以的，不需要就不用配置。

上面是對webpack-dev-server的介紹，接下來看看其他相關配置，

由於webpack3.x壓縮的效果不是特別好，壓縮程式碼的體積非常龐大，效率比較低。所以必須要通過相關外掛來提高程式碼壓縮外掛，從而提高程式碼的壓縮比率，減輕程式碼單個檔案的重量，不像4.x那樣將很多相關外掛全部整合餘webpack-cli中，從而提高webpack的配置效率，提高工作的效率。

webpack3.x相關外掛之webpack.optimize.CommonsChunkPlugin，提取第三庫和公共模組。

 new webpack.optimize.CommonsChunkPlugin({
			name: 'base',
			filename: 'js/[name].[hash:8].js'
		  }),

new webpack.DefinePlugin({//設定全域性變數
			ENV:JSON.stringify(process.env.NODE_ENV)
		}),
		
 

在這個根目錄下的所有檔案中，都能獲取得到ENV這個引數的值。

webpack3.x相關外掛之webpack.ProvidePlugin，可以設定全域性模組，不需要通過import或require進行引入，僅能直接獲取，無論網路第三方庫還是自己定義的庫，都能通過他進行設定；

new webpack.ProvidePlugin({//引入成為全域性模組
			$$:"jquery", 
			jquery:"jquery",
			"window.jquery":"jquery",
			"http":'./component/http.js'
		}),

webpack3.x相關外掛之熱更新，每次編譯自動儲存，webpack.HotModuleReplacementPlugin；

new webpack.HotModuleReplacementPlugin(),

webpack3.x相關外掛之模版外掛，編譯會自動生成一個html模版，不需要手動引入建立。

new htmlWebpackPlugin({
			template:__dirname+'/app/index.tmpl.html',
			//favicon:'./favicon.ico'
		}),

new openBrowser({
			url:webpackServer.protocol+webpackServer.host+':'+webpackServer.port
		}),

接下來重點介紹兩款外掛，一個就是將css和js程式碼給分割開的extract-text-webpack-plugin，另一個就是happypack採用多程序打包的外掛。

由於本人常用於react開發，是當下比較流行mv*框架。在打包過程中，css樣式也會被打包到js中，為了開發的方便快捷，採用此外掛將轉碼好的css程式碼從js中脫離出來。

而happypack外掛為了提高程式碼的編譯速度，實現了多程序打包。

程式碼：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const HappyPack = require('happypack');

const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
//加入happyThreadPool外掛包；
function createHappyThread(id,loaders){
	return new HappyPack({
      id: id,
      threadPool: happyThreadPool,
      loaders: loaders,
      //cache:true
    })
}


 

{
				test:/\.(css|scss)$/,
				use: ExtractTextPlugin.extract({//分離和js程式碼。
					fallback: 'style-loader',
					use: 'happypack/loader?id=sass'
                    
				})
			
			},
			{
				test:/\.(js|jsx)$/,
				use:'happypack/loader?id=jsx'
				
			},
			{
				test:/\.json$/,
				use:'happypack/loader?id=json'
				
			},
			{
				test:/\.(png|jpg|gif|jpeg|svg)$/i,
				use:'file-loader?limit=2048&name=img/[hash:8].[name].[ext]'




 }

 //分離js與css樣式外掛；
		new	ExtractTextPlugin({
		    filename: '[name].min.css',
		    allChunks: true,
		}),

createHappyThread('jsx',[{
					loader:"babel-loader",
					 options: {
                    	cacheDirectory: true
               		 }
				}]),
		createHappyThread('sass',[{loader:'css-loader',options: {
                    minimize: true
                }},{loader:'postcss-loader',options: {
					sourceMap: true,
					config: {
						path: 'postcss.config.js'  // 這個得在專案根目錄建立此檔案
					}} },{loader:'fast-sass-loader',options: { sourceMap: true }}]),
		createHappyThread('json',['json-loader']),