正式學習react(二)

標籤：使用   最簡   returns   icp   條件   base64   分享   extract   pat   

 

 

 

今天把上一篇還沒學習完的 webpack部分學習完：

之前有說過關於css的webpack使用。我們講了 

ExtractTextPlugin 來單獨管理css

講了module.loaders下關於 css的寫法：

module: {
    loaders: [
        // Extract CSS during build
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract(‘style‘, ‘css‘),
            include: paths
        }
    ]
},

還講了關於css?modules這個query 的作用，下面我們開始要用到Babel and babel-loader 來支援es6了！
預設大家都熟悉下面幾種模組管理方式：

CommonJS

ES6

 

 

AMD

 

 

 

 上面所有的格式規範，webpack都支援.

--------------------------------------------------------------------------------------------------------------

 現在講一下loader的定義：

 

loader (接收 字串)

loaders  (接收 數組) 

 

上面的都是數組，所以都寫的是loaders.

 

 

 webpack的loader 是講順序的，一定記住是從右往左，從右往左，從右往左。重要的事情說三遍！

 

loaders: [‘style‘, ‘css‘] 就相對於 style(css(input)) ，兩者沒有差別。

---------------------------------------------------------------------------------------------------------------------------

說完順序，再說參數，還記得之前說的modules嗎？

 

Passing Parameters to a Loader

{ test: /\.jsx?$/,

   loaders: [ ‘babel?cacheDirectory,presets[]=react,presets[]=es2015‘ ],

   include: PATHS.app

}

我們之前都是這樣寫的，但是這樣閱讀性比較差，我們推薦這樣的寫法：

 

{ test: /\.jsx?$/,

   loader: ‘babel‘,

   query: { cacheDirectory: true,

                presets: [‘react‘, ‘es2015‘] },

   include: PATHS.app

}

 

 

還有，我之前也推薦過 用include:這個key， 他接受string 也可以接收Array;

--------------------------------------------------------------------------------------------------------------------------------------------------------------

我之前介紹過ExtractTextPlugin 這個外掛程式，來講css檔案 output 到你的build裡。

---------------------------------------------------------------------------------------------------------------------------------------------------------------

Loading CSS

  It parses the styles in the given include path (accepts an array too) while making sure only files ending with .css are matched.

The definition then applies both style-loader and css-loader on it:

大意就是說 你寫了include,在你的module.loaders下。那webpack就只從這個檔案下找.css 結尾的檔案，匹配到就用style-loader 和 css-loader 來操作這些css檔案。

 

 整個過程就是Webpack會判斷這些檔案，然後在匹配到的檔案裡將 @import 和 url()聲明的欄位，轉化成require欄位，然後就是用到style-loader了，

 下面我們還會介紹 file-loader or url-loader.

 

PS：如果你想確保CSS也能運用sourcemaps 。你可以使用[‘style‘, ‘css?sourceMap‘]

並且設定output.publicPath為絕對路徑。

 

當然，我們可能在項目裡用了less，sass。

 less-loader

 

  

 

 node-sass 

 

你們的 LESS/SASS檔案裡可以使用import：

 

也可以直接從node_modules檔案夾裡載入

 

還有一些自己去瞭解。

 ---------------------------------------------------------------------------------------------------

導致我們的項目變慢，很可能是因為我們需要載入很多小資源。畢竟每個請求附帶了一個開銷。

HTTP / 2將協助在這方面和改變現狀。

 

Webpack 是允許在你的代碼裡內聯載入資源的，不過要使用url-loader這個載入器。他會把圖片

翻譯成BASE64在你的JavaScript bundles。

 -----------------------------------------------------------------------------------------------

Setting Up  url-loader

做開發的時候，我們使用url-loader 是不錯的選擇。因為你可能並不關心產生包的大小。

它有一個限制選項，在達到一定的限制條件以後被使用（延遲image到file-loader）。

具體的說就是,url-loader 是將一些url()裡需要下載的資源，下載下來！然後用BASE64編碼

內聯到我們bundles的js檔案裡。可以減少開銷。但是如果檔案太大，我們可能等不了。

我們就讓他在瀏覽器裡載入。這就是limit的作用。

就這樣小於25k的圖片將直接以base64的形式內聯在代碼中，可以減少一次http請求。

 style.js

 

webpack.config.js

 

 

運行webpack後：

 

 

-----------------------------------------------------------------------------

Setting Up  file-loader

url-loader是對file-loader的上層封裝，如果你忽略內聯url,我們可以直接使用 file-loader

 

The following setup customizes the resulting filename. By default file-loaderreturns the MD5 hash of the file‘s contents with the original extension:

開發人員可以根據自己的需求自己定製檔案名稱，預設 file-loader 會返回一個內容是MD5散列的原始擴充檔案。

不過這裡我自己定義了檔案名稱，打包處理後：

 

關於打包 svg ， 壓縮圖片等loader，大家有興趣自己去瞭解。

 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------

 我們的website也經常需要用到各種字型：最後介紹一下字型的打包：

依靠file-loader或者url-loader 都可以實現字型打包，最簡單的方式：

 

 想弄的好一點：

 

 

 有時候為了權衡網站的效能與美觀，我們可能會放棄內聯方式【增加request】，直接選擇打包，而且打包好多種字型樣式：

 

 

---------------------------------------------------------------------------------------到此為止，webpack基本內容介紹，最後一篇會介紹webpack一下原理-------------------------------

 

正式學習react(二)