由於之前對webpack的瞭解也沒有那麼的多，所以在自己去搭建的時候就會遇到各種問題，這次自己從頭到尾的搭建了一次，對webpack進行一次梳理

1、首先本人使用的版本是 [email protected]、[email protected]（webpack4網上說還有坑，所以學習先不設計4.x版本了）

2、初始化專案npm init，然後生產package.json檔案

3、建立一個src檔案，並在檔案下建立一個index.js檔案，作為整個專案的入口檔案，然後輸入

      document.body.innerHTML = "<div>ghj</div>";

4、建立一個build檔案，並在檔案下建立一個index.html檔案，作為整個專案的頁面入口，並引入打包好的bundle.js檔案

5、在根一級的目錄下面新建一個webpack.config.js檔案，用作整個專案的webpack的檔案

目錄結構如下

然後在命令列裡面輸入命令webpack，就會自動的在build檔案之下給生成一個新的bundle.js檔案

搭建react的環境

下載相應的包和依賴

npm install react react-dom --save-dev

npm install babel babel-cli babel-loader --save-dev

npm install babel-preset-env babel-preset-react --save-dev

注：以前編譯es6以上語法用的是babel-preset-es2015，現在是時候說再見了，babel-preset-env是一個更定製化的外掛，你可以指定你要相容的瀏覽器版本，這樣babel會選擇編譯該版本不支援的語法而不是全部編譯成舊的語法，具體配置參見：babel-preset-env

webpack.config.js裡面的配置

var path=require('path');


module.exports={
  entry: "./src/index.js",    //入口檔案--絕對路徑
  output: {
    path: path.resolve(__dirname,'build'),  //
    filename: 'bundle.js'
  },
  module:{
    loaders:[
      {
        test: /\.js$/, //配置要處理的檔案格式，一般使用正則表示式匹配
        loader: 'babel-loader', //使用的載入器名稱
        exclude:/node_modules/,
        query: {                //babel的配置引數，可以寫在.babelrc檔案裡也可以寫在這裡
            presets: ['env', 'react']   //{"presets": ["react", "env"]}
        }
      }
    ]
  },
  devServer: {
    contentBase: "./build",//本地伺服器所載入的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true,//實時重新整理
    //hot: true
  }

}

package.json檔案裡面scripts的配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --watch --color --port 8081"  //

  },

這樣就實現了webpack+webpack-dev-server+react熱更新的搭建。

注意：其中要想實現熱更新需要在package.json檔案和webpack.config.js檔案裡面分別都配置