八：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教程