Loader轉換器

1、簡介

webpack自己只能處理js模塊，Loader能夠理解爲模塊和資源的轉換器，它自己是一個函數，接受文件做爲參數，返回轉換的結果。所以，咱們就能經過require來加載任何類型的模塊和文件。

特色：

（1）Loader能夠經過管道方式鏈式調用，每一個loader能夠自願轉換爲任意格式傳遞給下一個loader，但最後一個loader必須返回js；

（2）同步或異步執行；

（3）運行與node.js環境中

（4）能夠經過npm進行安裝

（5）能夠接受參數，以此來傳遞配置項給loader；

（6）loader能夠經過文件擴展名（或正則表達式）綁定給不通類型的文件

命名規則：按照慣例，而非必須，loader 通常以 xxx-loader 的方式命名， xxx 表明了這個 loader 要作的轉換功能，好比 json-loader。

2、安裝及使用方法

 

::安裝

npm install css-loader style-loader   

 

在引用 loader 的時候可使用全名 json-loader，或者使用短名 json。

使用方法：

（1）在require()引用模塊時添加

     例如： 在頁面中引入一個 CSS 文件 style.css，首頁將 style.css 也當作是一個模塊，而後用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。

     

//載入style.css

require('!style-loader!css-loader!./style.css');

 

（2）在webpack全局配置中綁定

     詳見 經常使用loader介紹。

 

（3）經過命令行的方式使用

     在引入時直接使用：

 

require('./style.css');

 

在打包執行時：

 

webpack entry.js build.js --module-bind 'css=style-loader!css-loader'

::有些環境下可能須要使用雙引號

webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

 

3、經常使用loader

 

css-loader 處理css中路徑引用等問題

style-loader 動態把樣式寫入css

sass-loader scss編譯器

less-loader less編譯器

postcss-loader scss再處理

 

一、js處理

 

{

    test: /\.js?$/,

    exclude: /node_modules/,

    loader: 'babel',

    query: {

        presets: ['es2015', 'stage-2', 'react']

    }

}

 

（1）babel-loader  轉碼器

Babel是一個轉碼器，能夠將ES6語法轉換爲ES5語法，這樣就能夠用ES6編寫程序，而不用擔憂現有環境是否支持。

例如：

 

//轉碼前

arr.map(item => item + 1);  //箭頭函數

//轉碼後

arr.map(function(item){

     return item + 1;

});

第一步：Babel的配置文件 .babelrc，存放到項目的更目錄下。

全部Babel工具和模塊的使用，都必須先寫好 .babelrc。

 

{

     'presets':[

          'es2015',

          'react',

          'stage-2'

     ],

     'plugins':[]

}

 

①presets字段設定轉碼規則，官方提過一下的規則集，可根據須要安裝。

 

::ES2015轉碼規則

npm install --save-dev babel-preset-es2015

::react轉碼規則

npm install --save-dev babel-preset-react

::ES7不一樣階段語法提案的轉碼規則（共有四個階段），選裝一個

npm install --save-dev babel-preset-stage-0

npm install --save-dev babel-preset-stage-1

npm install --save-dev babel-preset-stage-2

npm install --save-dev babel-preset-stage-3

 

②plugins字段是babel插件。

例如:Ant Design 中須要按需加載antd腳本和樣式

 

npm install --save-dev antd babel-plugin-import

 

{

     "plugins": [

          ["import", { libraryName: "antd", style: true }]

     ]

}

 

第二步：babel-core

有的代碼須要調用Babel的API進行轉碼，就要使用babel-core模塊。

 

npm install babel-core --save-dev

 

更多Babel資料，請查閱大神日誌： http://www.ruanyifeng.com/blog/2016/01/babel.html

（2）jsx-loader  jsx編譯器

 

npm install --save-dev jsx-loader

 

二、css/sass/less 處理

 

npm install --save-dev css-loader style-loader sass-loader less-loader

 

{

    test: /\.css$/,

    loader: "style-loader!css-loader"

},

{

    test: /\.scss$/,

    loader: "style-loader!css-loader!sass-loader"

},

{

    test: /\.less$/,

    loader: "style-loader!css-loader!less-loader"

},

 

三、文件處理

 

npm install --save-dev url-loader file-loader

 

{

    test: /\.(jpg|png)$/,

    loader: "url-loader?limit=8192"

},

{

    test: /\.svg$/,

    loader: 'url-loader?limit=100000'

},

 

{

      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,

      loader: 'file-loader'

},

 

四、json處理

 

npm install --save-dev json-loader

 

{

     test:/\.json$/,

     loader:'json-loader'

}

 

4、loader一覽表

擴展名	語義	loader舉例
.js	returns module exports	babel-loader
.ts	returns module exports	ts-loader
.coffee	returns module exports	coffee-loader coffee-redux-loader
.jsx	returns module exports (react component)	jsx-loader react-hot-loader!jsx-loader
.json .json5	returns json value	json-loader json5-loader
.txt	return string value	raw-loader
.css	returns nothing, side effect of adding style to DOM	style-loader!css-loader style-loader!css-loader!autoprefixer-loader
.less	returns nothing, side effect of adding style to DOM	style-loader!css-loader!less-loader
.scss	returns nothing, side effect of adding style to DOM	style-loader!css-loader!scss-loader
.style	returns nothing, side effect of adding style to DOM	style-loader!css-loader!stylus-loader
.png .jpg .jpeg .gif .svg	returns url to image	file-loader url-loader
.woff .ttf	returns url to font	file-loader url-loader
.wav .mp3	returns url to audio	file-loader url-loader
.mpeg .mp4 .webm .ogv	returns url to video	file-loader
.html	returns HTML as string	html-loader
.md .markdown	returns HTML as string	html-loader!markdown-loader
.jade	returns template function	jade-loader
.hbs .handlebars	returns template function	handlebars-loader