正式學習react(二)

 

 

 

今天把上一篇還沒學習完的 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一下原理-------------------------------