Webpack配置詳解（package.json/webpack.config.js詳細配置 ）
webpack安裝
package.json配置以及模組安裝
webpack.config.js配置
開啟webpack-dev-server服務
熱替換外掛的安裝以及配置
開啟自動開啟瀏覽器外掛的安裝以及配置
載入器的安裝以及配置
完整package.json/webpack.config.js檔案
webpack安裝
依賴於node.js環境安裝
首先安裝node.js環境，http://nodejs.org/zh-cn/download/ 或者http://nodejs.cn/download/ 下載node.js相應版本並安裝（推薦安裝穩定版）；

安裝完成後，在命令小黑窗中node -v，檢查版本號，有版本號，安裝正確，否則重新安裝；

繼續檢查npm -v，檢查npm版本，有版本號則繼續下一步；（也可以安裝npm淘寶映象cnpm，執行命令npm install -g cnpm --registry=https://registry.npm.taobao.org）

安裝webpack模組
全域性安裝webpack模組，執行命令npm install webpack -g（簡寫：npm i webpack -g）,正確繼續下一步；（安裝較慢可以換用cnpm，下面npm均可替換cnpm）

繼續執行npm install webpack --save-dev（簡寫：npm i webpack -D），表示在專案中安裝webpack，並會在package.json中增加版本號，例"webpack": “^3.8.1”。

package.json配置以及模組安裝
建立package.json檔案
在小黑窗執行npm init，初始化專案檔案，根據提示寫入專案名稱、版本、負責人、時間等等，執行結束後會在專案資料夾中生成package.json（也可以執行npm init -y，預設專案配置）；

package.json配置
在package.json檔案 “scripts”中增加 “build”: “webpack --progress --colors”，後續執行命令npm run build使用；

package.json中模組安裝
首先需要在全域性環境下安裝模組，之後在專案中安裝模組。

例如安裝Echarts模組，先執行npm i -g echarts，之後在專案中執行npm i echarts -D即可。

webpack.config.js配置
引入相應的模組

var path = require('path');
var webpack = require('webpack');

暴露模組

module.exports = {
          entry: './index.js',//入口檔案
          //輸出檔案
          output: {
            path: path.resolve(__dirname, './dist'),
            publicPath: '/dist/',
            filename: 'bundle.js'
          }
      }

設定開啟的埠號
//設定開發者工具的埠號,不設定則預設為8080埠

devServer: {
        inline: false,
        port: 8181
  }

開啟webpack-dev-server服務
安裝webpack-dev-server依賴
在全域性中安裝npm i webpack-dev-server -g，之後在專案資料夾中安裝npm i webpack-dev-server -D。

引入webpack-dev-server模組
在webpack.config.js檔案中引入webpack-dev-server模組

var WebpackDevServer = require(‘webpack-dev-server’);

開啟server服務
執行命令webpack-dev-server，瀏覽器手動輸入http://localhost:8080 開啟server服務即可成功開啟服務。

或是執行命令webpack-dev-server --open，自動會在瀏覽器中開啟http://localhost:8080 。前提是有一個 index.html 檔案指向你的 bundle，且假設 output.filename 是 bunlde.js。

熱替換外掛的安裝以及配置
安裝依賴react-hot-loader（確保使用next版本）
執行命令npm i --save babel-loader [email protected]

定義用於熱替換的入口路徑

entry: {
  main: [
    // App 入口
    "./app/index",

    // 開啟 React 程式碼的模組熱替換(HMR)
    'react-hot-loader/patch',

    // 為 webpack-dev-server 的環境打包程式碼
    // 然後連線到指定伺服器域名與埠
    'webpack-dev-server/client?http://localhost:9000',

    // 為熱替換(HMR)打包好程式碼
    // only- 意味著只有成功更新執行程式碼才會執行熱替換(HMR)
    'webpack/hot/only-dev-server',
  ],
},

配置output
output: {
… …
// 對於熱替換(HMR)是必須的，讓 webpack 知道在哪裡載入熱更新的模組(chunk)
publicPath: “/”
},
配置module
使用 ES2015 模組使HMR正常工作，在es2015 preset設定中，將module選項設定為false。為此，需要引入react-hot-loader/babel 開啟 React 程式碼的模組熱替換(HMR)。

module: {

rules: [
{
// 語義直譯器，將 js/jsx 檔案中的 es2015/react 語法自動轉為瀏覽器可識別的 Javascript 語法
test: /.jsx?$/,
include: path.resolve(__dirname, “app”),
exclude: /node_modules/,

// 應該應用的 loader，它相對上下文解析
// 為了更清晰，`-loader` 字尾在 webpack 2 中不再是可選的
// 檢視 webpack 1 升級指南。
loader: "babel-loader",

// loader 的可選項
options: {
  presets: [
    // webpack 現在已經支援原生的 import 語句了, 並且將其運用在 tree-shaking 特性上
    [
      "es2015",
      {
        "modules": false
      }
    ],

    "react" // 轉譯 React 元件為 JavaScript 程式碼
  ],
  plugins: [
    "react-hot-loader/babel" // 開啟 React 程式碼的模組熱替換(HMR)
  ]
},

},
]
},

在webpack.config.js中模組暴露引入外掛
plugins: [
// 開啟全域性的模組熱替換(HMR)
new webpack.HotModuleReplacementPlugin()
]
在package.json中“scripts”定義start、dev

 "start": "webpack-dev-server --hot --inline",
    "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base"

之後在小黑窗中執行npm start/npm run dev操作

開啟自動開啟瀏覽器外掛的安裝以及配置
安裝OpenBrowserPlugin依賴
全域性安裝OpenBrowserPlugin依賴，執行命令npm i open-browser-webpack-plugin -g，在專案中執行命令 npm i open-browser-webpack-plugin -D

在webpack.config.js中plugins中配置

new OpenBrowserPlugin(
      {
        url: 'http://localhost:8080/echart_demo.html'
      }
    )

載入器的安裝以及配置
安裝css/sass/less loader載入器

npm install file-loader css-loader style-loader sass-loader ejs-loader html-loader jsx-loader image-webpack-loader --save-dev

載入器的配置
webpack.config.js配置：

module: {
        //載入器配置
        loaders: [
            //.css 檔案使用 style-loader 和 css-loader 來處理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 檔案使用 jsx-loader 來編譯處理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.scss 檔案使用 style-loader、css-loader 和 sass-loader 來編譯處理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //圖片檔案使用 url-loader 來處理，小於8kb的直接轉為base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }

完整package.json/webpack.config.js檔案
結構目錄

package.json檔案
{
"name": "wxf",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot --inline",
"dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base",
"build": "webpack --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"echarts": "^3.7.2",
"open-browser-webpack-plugin": "0.0.5",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
},
"dependencies": {
"babel-loader": "^7.1.2",
"react-hot-loader": "^3.0.0"
}
}

webpack.config.js檔案
var path = require('path');
var webpack = require('webpack');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var WebpackDevServer = require('webpack-dev-server');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  //設定開發者工具的埠號,不設定則預設為8080埠
  /*devServer: {
    inline: false,
    port: 8181
  },*/
  plugins: [
    // 開啟全域性的模組熱替換(HMR)
    new webpack.HotModuleReplacementPlugin(),
    new OpenBrowserPlugin(
      {
        url: 'http://localhost:8080/echart_demo.html'
      }
    )
  ],
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style!css"
      }
    ]
  }
}