什麼是webpack？

webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。

webpack核心概念

1. 入口(entry): 指示 webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始
2. 輸出(output): 告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這 些檔案，預設值為 ./dist
3. loader: 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript）。loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。
4. 外掛(plugins)： 被用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。外掛的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變數。外掛介面功能極其強大，可以用來處理各種各樣的任務。

建立react + webpack打包例項

1. 目錄結構為
2. npm i -S react react-dom //安裝react react-dom依賴;
3. 開啟檔案，在專案根目錄下新建 webpack.config.js 這個檔案，配置如下，記得去載入檔案中用到的loader依賴；

`const path = require('path'); //引入node下面的paht 模組，用於處理檔案與目錄的路徑
         const HtmlWebpackPlugin = require('html-webpack-plugin');//編譯html檔案儲存到bundle裡
e裡
module.exports = { = {
    entry:"./src/rc/app.js",
 ",
    output:{
        path:th:path.resolve(__d(__dirname,'dist'),
        filename:"e:"abb.js"//輸"//輸出的檔名
    },
    mode:"development",//模式：開發、生產、無模式，此處為開發模式
    plugins:[
        new HtmlWebpackPlugin({
            filename:"e:"index.html",//",//所要編譯的html檔案
            template:"src/rc/index.html"//所"//所要編譯的html檔案的模板
        })
    ],
    module: {//loader模組
        rules: [
          { test: /\.js$/,//以.js結尾的檔案
             use: [{
                loader:"babel-loader",//使用babel-loader來編譯
                options:{
                    presets:["react"]
                     }
                 }              
                ] 
            },
            { 
                test: /\.css$/,
                use: ["style-loader","css-loader"]                                           
                },
            { 
                test: /\.jpg$/,
                use: ["file-loader"]                                      
            }                   
        ]
      },
      devServer:{//本地開發的前端伺服器，用以除錯用
          open:true,//自動開啟瀏覽器
          port:9999//啟動的埠號
      }
    }
 

5. package.json檔案為

{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.js",//npm run dev 檔案會自動找webpack對應的檔案，並執行
    "start": "webpack-dev-server --config webpack.config.js"//npm run start 即可在前端伺服器環境下訪問打包好的檔案
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.23.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "react": "^16.6.0",
    "react-dom": "^16.6.0"
  }
}