八：Webpack的加載器

時間  2019-11-14
標籤 webpack 加載 简体版
原文   原文鏈接

1、什麼是加載器(loaders)

loaders 用於轉換應用程序的資源文件，他們是運行在nodejs下的函數 使用參數來獲取一個資源的來源而且返回一個新的來源(資源的位置)，例如：你可使用loader來告訴webpack去加載less文件、sass文件、es的js文件等

2、loaders 特性
javascript

  • loaders能夠串聯，他們應用於管道資源，最後的loader將返回javascript，其它的可返回任意格式（傳遞給下一個loader）css

  • loaders 能夠同步也能夠異步html

  • loaders在nodejs下運行而且能夠作一切可能的事java

  • loader接受參數，可用於配置裏node

  • loaders能夠綁定到extension/RegExps 配置jquery

  • loaders 能夠經過npm發佈和安裝webpack

  • 正常的模塊兒能夠處處一個loader除了css3

  • loaders 能夠訪問配置web

  • 插件能夠給loaders更多的特性npm

  • loaders能夠釋聽任意額外的文件



3、loaders的執行順序

loaders的執行順序分爲三部分：preLoaders - loaders - postLoaders，針對每個階段能夠這對不一樣的操做，preLoaders能夠進行代碼的時候檢查，只有檢測經過才能夠進行loaders。loaders階段主要進行css、js、 images等文件的處理。postLoaders階段沒有用到過


4、css-loader和style-loader添加CSS樣式


如今來添加一些樣式，webpack使用loader的方式來處理各類各樣的資源，好比說樣式文件，咱們須要兩種loader，css-loader 和 style－loader，css-loader會遍歷css文件，找到全部的url(...)而且處理。style-loader會把全部的樣式插入到你頁面的一個style tag中。

安裝咱們的loader

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

 


配置loader，在webpack.config.js中

var webpack = require('webpack');

var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 獲取到當前目錄
var ROOT_PATH = path.join(__dirname, '../');
// 項目根目錄
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目錄
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最後輸出放置公共資源的目錄
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    //項目的文件夾 能夠直接用文件夾名稱 默認會找index.js ，也能夠肯定是哪一個文件名字  
    entry: {
        app: ['./src/js/index.js'],
        vendors: ['jquery', 'moment'] //須要打包的第三方插件  
    },
    //輸出的文件名,合併之後的js會命名爲bundle.js   
    output: {
        path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle_[name].js"
    },
    module: {
        loaders: [
            // 把以前的style loader改成     
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
                exclude: /node_modules/

            }
        ]
    }
}
;

 


看loaders的書寫方式，test裏面包含一個正則，包含須要匹配的文件，loaders是一個數組，包含要處理這些程序的loaders，這裏咱們用了css和style，注意loaders的處理順序是從右到左的，這裏就是先運行css-loader而後是style-loader.

咱們在webpackDemo項目裏面建立一個css文件夾，而後 建立 index.css文件，內容以下：


body{
    font-size: 16px;
}

 


而後在index.js引用 css文件


var login=require('./login');
var data = require('data');
require('./../css/index.css');

$("#welcome").html(data);

 


這樣就能實現樣式引用了。還能夠結合ExtractTextPlugin進行樣式提取。

 

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 獲取到當前目錄
var ROOT_PATH = path.join(__dirname, '../');
// 項目根目錄
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目錄
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最後輸出放置公共資源的目錄
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    //項目的文件夾 能夠直接用文件夾名稱 默認會找index.js ，也能夠肯定是哪一個文件名字  
    entry: {
        app: ['./src/js/index.js'],
        vendors: ['jquery', 'moment']
            //須要打包的第三方插件  
    },
    //輸出的文件名,合併之後的js會命名爲bundle.js    
    output: {
    path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle_[name].js"
    },
    module: {
        loaders: [
            // 把以前的style&css&less loader改成    
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
                exclude: /node_modules/
 
            }, {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract('style', 'css!less'),
                exclude: /node_modules/
 
            },
        ]
    },
    plugins: [
        // 分離css      
        new ExtractTextPlugin('[name].bundle.css', {
            allChunks: true
        })
    ],
        externals: {
        // require('data') is external and available
        //  on the global var data     
        'data': 'data',
         devtool: 'source-map'
    }
};

 

 


5、autoprefixer-loader和less-loader處理less文件


項目中若是用到less，就須要對less進行轉換，經過less-loader就能進行轉換。autoprefixer-loader是針對css3的前綴進行自動 填充，例如：border-radius,autoprefixer-loader經過他就能把各個瀏覽器的前綴添加上去。

安裝 

npm install less autoprefixer-loader less-loader postcss-loader --save-dev

 


添加loader

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 獲取到當前目錄
var ROOT_PATH = path.join(__dirname, '../');
// 項目根目錄
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目錄
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最後輸出放置公共資源的目錄
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    //項目的文件夾 能夠直接用文件夾名稱 默認會找index.js ，也能夠肯定是哪一個文件名字 
    entry: {
        app: ['./src/js/index.js'],
        vendors: ['jquery', 'moment']
            //須要打包的第三方插件 
    },
    //輸出的文件名,合併之後的js會命名爲bundle.js    
    output: {
        path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle_[name].js"
    },
    module: {
        loaders: [
            // 把以前的style&css&less loader改成      
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader'),
                exclude: /node_modules/

            }

            , {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract('style', 'css!autoprefixer?{browsers: ["last 2 version", "IE 8", "Android 4.0", "iOS 6"]}!less?strictMath&noIeCompat!postcss')
            }
        ]
    },
    postcss: function() {
        return [require('postcss-fixes')({ preset: 'recommended' })]
    },
    plugins: [
        // 分離css      
        new ExtractTextPlugin('[name].bundle.css', {
            allChunks: false
        })
    ],
};

 

 在webpackDemo 添加login.less文件


.maker-config {
    width: 100px;
    background-color: red;
    border-radius: 50px;
    margin-left: -48px;
    float: right;    a{
        font-size: 16px;
        display: flex    }
}

 


 
 執行webpack命令生成的css文件爲:


body{font-size:16px}
.maker-config{
width:100px;
background-color:red;
border-radius:50px;
margin-left:-48px;
float:right}
.maker-config a{
font-size:16px;
display:-webkit-box;
display:-ms-flexbox;
display:flex}/*# sourceMappingURL=app.bundle.css.map*/

 

 
6、url-loader圖片處理

這個和其餘同樣，也許你也已經會玩了。安裝loader，處理文件。諸如圖片，字體等等，不過有個神奇的地方它能夠根據你的需求將一些圖片自動轉成base64編碼的，爲你減輕不少的網絡請求。

安裝url-loader
 

npm install url-loader --save-dev

 

配置config文件 

{
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'
      }

 


注意後面那個limit的參數，當你圖片大小小於這個限制的時候，會自動啓用base64編碼圖片。

咱們修改一下login.less文件


.maker-config {
    background-color: red;
    border-radius: 50px;
    height:200px;
    background: url('../images/white.png'); 
　　a{
        font-size: 16px;
        display: flex    }
}

 


執行webpack執行命令，查看編譯以後的css文件，能夠看到 圖片被轉換爲base64編碼


body{font-size:16px}.maker-config{width:100px;background-color:red;border-radius:50px;height:200px;margin-left:-48px;float:right;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAADXBAMAAAB7U9mGAAAAGFBMVEXw8PDy8vL09PT29vbt7e3r6+v4+Pj7+/v9bAgbAAAOsUlEQVR42rxaS5cyNRC9VQm4rUqacVuVbsZtukHX6QZ1C+PoGsbHWv3/C8/xddTxNSLfD4ADSe6j7i0AGNe+0AU2gA5Aqh1maZ657w9cNJJPBUHCZxTYEwslk7XjwVTWulgWrnaESqXMaUZ39pF0Z8RzKGXNzBOmXDFsB)}.maker-config a{font-size:16px;display:-webkit-box;display:-ms-flexbox;display:flex}/*# sourceMappingURL=app.bundle.css.map*/
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程