webpack3-loader和plugin的概念理解

對於loader,它就是一個轉換器,將A文件進行編譯造成B文件,這裏操做的是文件,好比將A.scss或A.less轉變爲B.css,單純的文件轉換過程;css

對於plugin,它就是一個擴展器,它豐富了wepack自己,針對是loader結束後,webpack打包的整個過程,它並不直接操做文件,而是基於事件機制工做,會監聽webpack打包過程當中的某些節點,執行普遍的任務。html

一、loader前端

  Loader是webpack最重要的功能之一。Loader讓webpack可以處理不一樣的文件。loader能夠將全部類型的文件轉換爲webpack可以處理的有效模塊,而後利用webpack的打包能力,對他們進行處理。本質上,webpack loader將全部類型的文件,轉換爲應用程序的依賴圖能夠直接引用的模塊。
  例如,vue

loader能夠將sass,less文件的寫法轉換成css,而不在使用其餘轉換工具。
能夠將ES6或者ES7的代碼,轉換成大多數瀏覽器兼容的JS代碼。
能夠將React中的JSX轉換成JavaScript代碼。

即,在webpack中Loader有兩個目標:node

識別出應該被對應的loader進行轉換的文件。(使用test屬性)
轉換這些文件,從而使其可以被添加到依賴圖中(並最終添加到bundle中)。(使用use屬性)

用法:
  Loader須要單獨安裝,須要什麼Loader就使用npm安裝便可。並對應webpack.config.js中的module屬性:react

module:{webpack

rules: [{
    test: 
    use: 
    include/exclude:
    query: 
}]

}web

test:用於匹配處理文件的擴展名的表達式,必須
use:loader名稱,就是要使用的模塊名,必須
include/exclude:手動添加必須處理的文件(文件夾)或屏蔽不須要處理的文件(文件夾),可選
query:爲loader提供額外的設置選項,可選

其中,use有三種寫法:npm

(1)直接用use:

use:['style-loader','css-loader']

(2) 將use換成loader:小程序

loader:['style-loader','css-loader']

(3)使用use + loader:

use: [{
         loader: "style-loader"
       }, {
         loader: "css-loader",
         options:{}
      }]

例如:

module:{

rules: [
        {
          test: /\.css$/,
          use: [ 'style-loader', 'css-loader' ]
        },
        {
          test: /\.css$/,
          use: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              options: {
                modules: true
              }
            }
          ]
        }
      ]
    },

二、plugins

  loader被用於轉換某些類型的模塊,而插件則能夠用於執行普遍的任務。插件的範圍包括,從打包優化和壓縮,一直到從新定義環境中的變量。插件接口功能極其強大,能夠用來處理各類各樣的任務。
  想要使用一個插件,你只須要 require()它,而後將它添加到plugins數組中。多數插件能夠經過選項自定義。你也能夠在一個配置中由於不一樣目的而屢次使用同一個插件,這時須要經過使用new操做符來建立它的一個實例。
剖析:
  webpack插件是一個具備 apply 屬性的JavaScript對象。apply屬性會被webpack compiler調用,而且compiler對象可在整個編譯週期訪問。
用法:
  因爲插件能夠攜帶參數/選項,你必須在webpack配置中,想plugins屬性傳入 new 實例。
例如:

// webpack.config.js文件頭部引入插件
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');

// 插件配置
plugins:[

new uglify(),
new htmlPlugin({
      minify:{
        removeAttributeQuotes: true
      },
      hash: true,
      template: './src/index.html'
    }),

],

(1)JS 壓縮
  在webpack中JS壓縮使用的是 uglifyjs-webpack-plugin插件。

const uglify = require('uglifyjs-webpack-plugin');

plugins: [

new uglify();

]

注意: 在開發環境中使用該插件會報錯,由於在開發預覽時須要明確報錯行數和錯誤信息,因此不須要對JS壓縮,而生產環境中才會對JS壓縮。devServer用於開發環境,而壓縮JS用於生產環境,在開發中作生產環境的事情,因此會報錯。

(2)打包HTML
  要將 HTML 文件從 src 目錄下打包到 dist 目錄下,須要藉助 html-webpack-plugin 插件。該插件須要安裝。

npm install html-webpack-plugin --save-dev

配置:

const htmlPlugin = require('html-webpack-plugin');

plugins: [

new htmlPlugin({
    minify: {
        removeAttributeQuotes: true
    },
    hash: true,
    template: './src/index.html'
})

]

minify:是對HTML文件進行壓縮,removeAttributeQuotes是去除屬性的雙引號。
hash:爲了不緩存js,加入 hash
template:是要打包的HTML模板路徑和文件名稱。

更多angular1/2/4/五、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目,請關注微信公衆號——全棧弄潮兒

微信公衆號.png

前端最火框架排行榜——小程序二維碼

前端最火框架(小程序)

相關文章
相關標籤/搜索