Webpack的加载器

一、什么是加载器(loaders)

loaders 用于转换应用程序的资源文件，他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置)，例如：你可以使用loader来告诉webpack去加载less文件、sass文件、es的js文件等

二、loaders 特性

  • loaders可以串联，他们应用于管道资源，最后的loader将返回javascript，其它的可返回任意格式（传递给下一个loader）
  • loaders 可以同步也可以异步
  • loaders在nodejs下运行并且可以做一切可能的事
  • loader接受参数，可用于配置里
  • loaders可以绑定到extension/RegExps 配置
  • loaders 可以通过npm发布和安装
  • 正常的模块儿可以到处一个loader除了
  • loaders 可以访问配置
  • 插件可以给loaders更多的特性
  • loaders可以释放任意额外的文件

三、loaders的执行顺序

loaders的执行顺序分为三部分：preLoaders - loaders - postLoaders，针对每一个阶段可以这对不同的操作，preLoaders可以进行代码的时候检查，只有检测通过才可以进行loaders。loaders阶段主要进行css、js、 images等文件的处理。postLoaders阶段没有用到过

四、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‘
    }
};

五、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*/

六、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*/
时间： 2024-11-03 21:04:58

Webpack的加载器的相关文章

webpack loader加载器

配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理. 1.node.js安装好之后也会自动默认安装好npm,所以cmd cd进入当前项目下输入npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev命令下载这些包. 2.修改webpack.con

webpack中的加载器

通过loader打包非js模块 在实际开发过程中,webpack 默认只能打包处理以.js 后缀名结尾的模块,其他非.js 后缀名结 尾的模块,webpack默认处理不,需要调用loader加载器才可以正常打包,否则会报错! loader加载器可以协助webpack打包处理特定的文件模块,比如: less-loader可以打包处理 .less相关的文件 sass-loader可以打包处理 .scss相关的文件 url-loader可以打包处理css中与url路径相关的文件 loader的调用过程

webpack.config.js====CSS相关：：：css加载器

1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev //loader加载器加载css和less模块 cnpm install style-loader css-loader less less-loader --save-dev //样式抽离文件 如果是webpack4.X 需要加@next //现在webpack4.x支持mini-css-ext

webpack.config.js====CSS相关：：：postcss-loader加载器，自动添加前缀

1. 安装:复制拷贝文件 cnpm install postcss-loader autoprefixer --save-dev 2. webpack.config.js中使用 rules: [ //配置css加载器 { test: /\.css$/, use: cssExtract.extract({ fallback: "style-loader", use: ["css-loader", "postcss-loader"] }) }, //

webpack模块加载css文件及图片地址

webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了http请求次数,显著提高了页面响应性能的用户体验. 加载css文件时,如果css里含有图片的引用地址,编译时webpack会将图片资源处理并输出到设置的publicPath参数位置,该参数可以是以页面为基准的相对地址,也可以是以根目录为基准的绝对地址.url-laoder会在这个地址下兴建一个im

js模块化/js模块加载器/js模块打包器

之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7628(大神的文章写的很详细,建议先看完大神的文章) 一.js模块化 什么是js模块化,我们从历史说起. 1.一开始我们怎么写脚本?就是在html文件中用<script></script>写代码 这种方式的缺点:代码复用靠复制,基本是全局变量. 2.后来我们用js文件写代码,用<

模块加载器

模块加载器 最近在做新项目的时候自己利用一点业余时间写了一个简单的js模块加载器.后来因为用了webpack就没有考虑把它放到项目里面去,也没有继续更新它了.模块加载器开源的有很多,一般来说seaJS和reqiureJS都能满足基本需求.本篇博文主要分享一下卤煮写这个加载器的一些想法和思路,作为学习的记录. js模块化加载已经不是一个新鲜概念了,很多人都一再强调,大型项目要使用模块化开发,因为一旦随着项目的增大,管理和组织代码的难度会越来越难,使得我们对代码的管理变得重要起来.当然,在后端模块化

实现简单的 JS 模块加载器

实现简单的 JS 模块加载器 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块的定义,如果您之前有去思考过按需加载的原理,那你可能已经知道按需加载需要依赖一个模块加载器.它可以加载所有的静态资源文件,比如: JS 脚本 CSS? 脚本 图片 资源 如果你了解 webpack,那您可以发现在 webpack 内部,它实现了一个模块加载器.模块加载器本身需要遵循一个规范,当然您可以自定义规范,大

js前端模块化之加载器原理解析(一)

先来说一下前端模块化的价值:引用模块此处有详细的介绍,可以自行前往观看. 一.总结如下优点: (1)解决命名冲突(2)烦琐的文件依赖(3)模块的版本管理(4)提高可维护性(5)前端性能优化(6)跨环境共享模块 二.加载器的基本思路: 如何去定义我们的模块? 如何将我们定义的模块去合并? 我们想一下,如果我们正常的引用入js到页面我们需要做神马事情,是否是使用:<script type="text/javascript" src="xxx"></sc