今天繼續(xù)學(xué)習(xí)Webpack技術(shù)。

文章是這篇 入門Webpack，看這篇就夠了

在開發(fā)的時(shí)候，每次修改代碼都需要重新打包德華會(huì)非常麻煩，于是一種新的技術(shù)熱更新出現(xiàn)了。每次修改代碼保存之后，都會(huì)自動(dòng)構(gòu)建打包新的代碼。

Webpack可以提供這個(gè)服務(wù)，它會(huì)基于node.js構(gòu)建一個(gè)本地服務(wù)器，可以實(shí)現(xiàn)你想要的這些功能，不過它是一個(gè)單獨(dú)的組件，在webpack中進(jìn)行配置之前需要單獨(dú)安裝它作為項(xiàng)目依賴。

Loaders是webpack中最讓人激動(dòng)人心的功能之一了。通過使用不同的loader，webpack通過調(diào)用外部的腳本或工具可以對(duì)各種各樣的格式的文件進(jìn)行處理，比如說分析JSON文件并把它轉(zhuǎn)換為JavaScript文件，或者說把下一代的JS文件（ES6，ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器可以識(shí)別的JS文件。或者說對(duì)React的開發(fā)而言，合適的Loaders可以把React的JSX文件轉(zhuǎn)換為JS文件。

這里文章的demo中有一處bug

module: {//在配置文件里添加JSON loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      }
    ]
  },

上面的loader應(yīng)該為“json-loader”，與下載的功能名字相同，不然會(huì)報(bào)如下錯(cuò)誤

ERROR in ./app/Greet.js
Module not found: Error: Can't resolve 'json' in '/Users/xxx/Documents/tryWebp'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'json-loader' instead of 'json',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

這時(shí)候我的webpack.config.js是這樣的

module.exports = {
  // 打包模式之一，可以用這個(gè)打包開發(fā)環(huán)境，速度較快，但是安全性不足
  devtool: 'eval-source-map',

  // 源文件，從這個(gè)文件引申出去的所有文件的來源，這個(gè)文件中多有import的都會(huì)被一起打包。
  entry:  __dirname + "/app/main.js",

  // 輸出文件的名字以及輸出路徑
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  // JSON loader
  module: {
    loaders: [
      {
        test: /\.json$/,//正則表達(dá)式匹配文件名稱
        loader: "json-loader"http://一個(gè)loader的名稱，應(yīng)與下載的名字完全相同
        //include/exclude:手動(dòng)添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）
        //query：為loaders提供額外的設(shè)置選項(xiàng)（可選）
      }
    ]
  },

  // 熱更新相關(guān)配置
  devServer: {
    port: 8080,
    contentBase: "./public",//本地服務(wù)器所加載的頁面所在的目錄
    colors: true,//終端中輸出結(jié)果為彩色
    historyApiFallback: true,//不跳轉(zhuǎn)
    inline: true//實(shí)時(shí)刷新
  } 
}

先到這邊，剩下明天繼續(xù)研究。