webpack 常用的loader_webpack 常用loader - CSDN
精华内容
参与话题
  • loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容可能,你会遇到当你用webpack打包的时候,提示你需要一个loader来处理文件,那webpack中的loader就是帮助预处理下模块中...

    loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容

    可能,你会遇到当你用webpack打包的时候,提示你需要一个loader来处理文件,那webpack中的loader就是帮助预处理下模块中的内容

    默认webpack只会处理js代码,所以当我们想要去打包其他内容时,让webpack处理其他类型的内容,就要使用相应的loader

    使用方法:

    1、在配置文件中(我的是webpack.config.js)加入module属性,该属性是一个对象,在这个属性中有一个rules字段,嗯,先看一下例子,然后再解释

    module:{
            rules:[{
                test:/\.js$/,
                use:[{
                    loader:'babel-loader',
                    options:{
                        presets:['react']
                    }
                }]
            }]
        }

    我们可以看到rules属性的属性值为一个数组,每一个数组成员都是一个对象,可以配置不同的规则

    test:test后是一个正则表达式,匹配不同的文件类型

    use:在这个规则中,当你匹配了这个文件后,使用什么样的loader去处理匹配到的文件,use接收的是一个数组,意味着当他匹配到文件后,它可以启用很多的loader去处理文件的内容

    use中可以有字符串和对象,当我们需要对loader进行额外的配置时,需要用到对象,如果我们使用的是loader默认的配置,就直接字符串(对应的loader)即可

    上面的例子中,因为我们需要对设置预设,所以就将其放在了对象中,该对象中loader:后面是需要的loader

    options:{}对应的loader进行的一些配置

    当然,还会有其他的一些属性比如(exclude、include等),这里就不再详细赘述

    2、使用这些loader前,我们还需要先下载好和这个loader相关的一些包,所以在你的命令行中使用  npm i -D  +要安装的模块名(执行完之后,在package.json中就多了对应的包)

    3、然后就是运行了,当然这只是loader使用时需要准备的大致东西,但每个loader的使用还要具体来说,下面我们举几个常用的例子,把步骤写一下

    一、webpack处理jsx内容

    1、因为需要用到react,所以先安装react和react-dom库,所以执行下面的命令(注意如果还没有安装依赖,要先执行npm i,这条命令,会自动到package.json中查看devDependencies和dependencies中声明了哪些包,然后会先把这些包安装好)

    npm i -S react react-dom

    2、在入口文件(我这里使用index.js)中引入上面的两个库

    import React  from 'react';
    import ReactDOM  from 'react-dom';

    然后就可以使用相应的jsx语句了

    ReactDOM.render(
        <div className="fa fa-rocket"><div className={style.ot}>React</div></div>,
    
        document.getElementById('root')/*上面的逗号不可少,此处不可加分号*/
    );

    3、因为是jsx文件,所以我们需要使用相应的loader来对其jsx内容进行处理,在使用loader之前,应该先安装好和这个loader相关的一些包,如下

    npm i -D babel-loader  babel-core

    4、使用上面的两个包,在配置文件中加入module属性

    module:{
            rules:[{
                test:/\.js$/,
                use:[{
                    loader:'babel-loader',
                    options:{
                        presets:['react']
                    }
                }]
            }]
        }
    使用babel-loader,其实本质上就是使用babel这个编译器去编译一些文件,我们需要的是js文件,它可以编译葛洪语法,把ES6编译为ES5,把jsx编译为js代码,所以再我们没有告诉babel-loader使用什么样的东西去编译什么样的语法之前,它是不会做任何工作的,所以我们现在要处理的是jsx的代码,需要一个预设来告诉babel-loader,当你匹配到jsx文件之后,你要启用这个预设去处理相应的内容,我们要使用的预设叫做react,也就是上面的
    presets:['react']

    5、可以去打包了,npm run dev(dev是自己起的名字,打包用的)

    分析总结:我们在入口文件中使用了jsx的语法,这些代码,不是真正的js代码,所以,不能直接去运行这个js文件,如果浏览器加载了这个js文件,发现里面有一些不是js代码,它就会报错

    此时,我们要将里面的代码进行一些转换,转换的关键就在于你使用什么样的loader去处理里面的内容,所以我们在配置里面先匹配到一种叫js的文件,只要你是js的文件被匹配到,在打包的过程中,webpack发现了你这个文件是js文件,webpack就会启用相应的设置去处理这个被匹配到的文件里面的内容,我们在这里声明了一个babel-loader,当js文件被找到时,它就会先用babel-loader去处理一遍这个入口文件里面的内容,然后,我们还对这个loader进行了一些设置,所以在打包的过程中,它会先把jsx代码转换成了js代码,然后就顺利地输出了js打包后的文件,此时,代码就可以正常运行了

    二、引入样式文件

    1、使用css文件时,只需要在入口文件引入你的样式文件

    import './style/main.css';
    
    2、安装需要用到的loader
    npm i -D css-loader
    npm i -D style-loader

    css-loader:当匹配到css文件时,就要用css-loader对css样式进行处理

    style-loader:当有样式被打包到我们的入口文件时,style-loader会把打包的样式插入到我们的HTML结构中

    3、在配置文件中进行相应的配置,在module,中rules中加入下面的规则

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

    use中的style-loader和css-loader顺序不能变,因为loader的处理有一个优先级,从右到左、从下到上

    很显然,只有当我们对css文件进行处理打包之后才将其插入到HTML结构中,所以要css-loader在右侧,style-loader在左侧

    4、npm run dev(或者可以直接run start)

    三、引入图片

    1>、背景图片

    css-loader会处理css的资源,当它遇到一个url的时候,css-loader会帮助我们处理url里面的东西,当出现url,css-loader就会知道,可能要加载一些东西,要引入一些东西,这时,css-loader会帮助你去引入这个模块,之后webpack会帮助你处理这个模块

    css-loader会处理url里面的内容,帮助引入里面的资源,在webpack里面,引入资源,这些资源也会被称之为模块,像图片这些模块,webpack根本搞不定,所以需要一个loader来处理这种类型的模块

    所以专门处理图片的loader是file-loader

    1、首先,因为背景图片也是在css中引入的,所以需要引入css相关的loader是一定,上面已经有了,这里就不再重复写了

    2、安装对应的loader包

    npm i -D file-loader

    3、在配置文件中进行相应的配置,道理和上面的差不多,直接上代码

    {
                    test:/\.jpg|png|jpeg|gif$/,
                    use:['file-loader']
                }
    file-loader主要做了两件事:1、把url里面内容转换成我们最终需要使用的那个路径。2、把图片转移到我们输出的目录,并且把图片更改为另外一种名字或者做一些其他的处理


    2>、在HTML中插入的图片

    都是图片,所以用到的自然也是file-loader这个loader,具体的配置,看上面的,主要说说不同之处

    首先我们需要在入口文件中导入图片

    import dog  from './common/imgs/dog.jpg'
    ReactDOM.render(
        <div><img src={dog}/></div>,
    document.getElementById('root')
    
     );

    当我们在模块里面使用import来引入一个图片资源的时候,file-loader也会把这个图片移动到你的输出目录,给它更改一个名字,然后返回一个最终要加载的图片的一个路径

    在css的背景图片和HTML结构中插入的图片,两者的不同是:在HTML中插入图片需要自己手动引入一个图片资源,然后webpack会帮助你引入这个模块(资源),引入这个资源的时候,file-loader会帮助你做相应的处理,而在css文件中,直接是正常的写法即可,不需要自己去手动import一个文件资源,因为css-loader在遇到url时,会帮助你处理url中的内容,它在处理时,就会帮你引入了这个图片资源,然后用file-loader来处理这个图片资源

    3>、使用url-loader引入图片,可以说它是file-loader的增强版

    url-loader会把我们的图片使用base64的形式编码成另外一种字符串,网页是可以识别这种编码的东西的,这样的好处是,它减少了图片的请求,你只要请求回了这个页面,图片也就过来了,可以减少网络的请求,但是如果图片过大,这个字符串就会变得特变大,让加载的文件变得特别大

    所以如果图片很小,没必要让其重新请求图片,直接将其写进页面中,让浏览器去解析,当图片过大时,就不让他编码,看下面的实现过程

    {
                    test:/\.jpg|gif|png$/,
                    use:[{
                        loader:'url-loader',
                        options:{
                            limit:10000//以bit为单位,当小于10000bit时,编码,大于10000bit时,不编码
                        }
                    }],
                }

    总结:当使用url-loader去处理一些资源的时候,默认会把所有的资源都是用base64的形式进行编码,但是我们可以给它一个limit属性去约束他,当资源小于某个值的时候,才去编码,当不小于这个值时,它其实是会把这个资源交个file-loader去处理




    展开全文
  • webpack安装及卸载常用命令

    千次阅读 2018-07-17 18:09:54
    npm install webpack -g //-g 代表全局安装 npm install webpack -s //-s 代表局部安装 #安装 npm install --save-dev webpack -s #安装 webpack-cli npm install --save-dev webpack-cli -s //局部安装 (we...
    ##安装(推荐局部安装)
    npm install webpack -g      //-g 代表全局安装
    npm install webpack -s      //-s 代表局部安装
    
    #安装 
    npm install --save-dev webpack  -s
    
    #安装 webpack-cli
    npm install --save-dev webpack-cli -s //局部安装 (webpack 4.0必须安装)
    
    #创建backage.json文件
    npm init -y
    
    #安装 style-loader css-loader
    npm i style-loader css-loader -s
    #安装less的loader
    npm install --save-dev less less-loader -s
    #安装file-loader加载图片
    npm install --save-dev file-loader -s
    #安装url-laoder 加载字体
    npm install --save-dev url-loader -s
    #安装csv-loader xml-loader 加载数据(CSV、TSV 和 XML)
    npm install --save-dev csv-loader xml-loader -s
    
    #检查版本是否安装成功
    webpack -v
    
    ##删除
    #全局卸载
    npm uninstall webpack -g
    
    #局部卸载
    npm uninstall webpack -s
    展开全文
  • webpackloader 和 plugin

    万次阅读 2016-05-29 16:37:10
    loader 用于加载待打包的资源,plugin 用于扩展 webpack

    引子

    webpack 是现在前端开发常用的打包工具,上手简单,但是有很多概念比较难懂。这里整理下,方便以后查阅。

    loader 和 plugin

    主要区别

    • loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件,对于其他资源例如 css,图片,或者其他的语法集,比如 jsx, coffee,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。从字面意思也能看出,loader是用于加载的,它作用于一个个文件上。

    • plugin 用于扩展webpack的功能。它直接作用于 webpack,扩展了它的功能。当然loader也时变相的扩展了 webpack ,但是它只专注于转化文件(transform)这一个领域。而plugin的功能更加的丰富,而不仅局限于资源的加载。

    常用的plugin

    • CommonsChunkPlugin 创建一个公用的chunk,常用于将第三方lib抽取成公用js,例如
    entry: {
      vendor: ["jquery", "other-lib"],
      app: "./entry"
    }
    new CommonsChunkPlugin({
      name: "vendor",
      filename: "vendor.js",
      minChunks: Infinity
    })

    更多的在这里

    常用的loader

    loader的功能就是加载资源到webpack

    • css 和 style
      cssloader 和 styleloader 做两件事情
      • css-loader 遍历所有require的css文件,输出文件内容
      • style-loader 将css内容输出到页面的style标签中

    所以,在 webpack.config.js 中, css的配置是这样的

    { test: /\.css$/, loader: "style!css" }

    style!css类似一种输出重定向,css-loader的输出会作为style-loader的输入。

    如果使用了css预处理器,比如less,那么只需要在最后加上less的laoder

    { test: /\.css$/, loader: "style!css!less" }

    另一种写法(推荐)

    { test: /\.css$/, loaders: ["style","css","less"] }

    更多的在这里

    总结

    loader 用于加载待打包的资源,plugin 用于扩展 webpack。

    展开全文
  • webpackloader和plugin的区别

    千次阅读 2019-03-25 15:32:03
    原文地址:详解webpack loader和plugin编写 一、webpack的常见配置 const webpack = require("webpack"); const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module....

    原文地址:详解webpack loader和plugin编写

     

    一、webpack的常见配置

    const webpack = require("webpack");
    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = {
        // 入口文件
        entry: {
            app: path.join(__dirname, "../src/js/index.js")
        },
        // 输出文件
        output: {
            filename: "[name].bundle.js",
            path: path.resolve(__dirname, "dist"),
            publicPath: "/"
        },
        // loader配置
        module: {
            rules: [
                {
                    test: /\.scss/,
                    use: [
                        "style-loader",
                        "css-loader"
                    ]
                }
                ......
            ]
        },
        // plugins配置
        plugins: [
            // 重新创建html文件
            new HtmlWebpackPlugin({
                title: "首页",
                filename: "index.html",
                template: path.resolve(__dirname, "../src/index.html")
            })
            ......
        ]
    }

    二、webpack的打包原理

    1. 识别入口文件
    2. 通过逐层识别模块依赖(Commonjs、amd或者es6的import,webpack都会对其进行分析,来获取代码的依赖)
    3. webpack做的就是分析代码,转换代码,编译代码,输出代码
    4. 最终形成打包后的代码

    三、什么是loader

    loader是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中

    1. 处理一个文件可以使用多个loader,loader的执行顺序和配置中的顺序是相反的,即最后一个loader最先执行,第一个loader最后执行
    2. 第一个执行的loader接收源文件内容作为参数,其它loader接收前一个执行的loader的返回值作为参数,最后执行的loader会返回此模块的JavaScript源码

    四、什么是plugin

    在webpack运行的生命周期中会广播出许多事件,plugin可以监听这些事件,在合适的时机通过webpack提供的API改变输出结果。

    五、loader和plugin的区别

    对于loader,它是一个转换器,将A文件进行编译形成B文件,这里操作的是文件,比如将A.scss转换为A.css,单纯的文件转换过程

    plugin是一个扩展器,它丰富了webpack本身,针对是loader结束后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些节点,执行广泛的任务

    class MyPlugin{
        constructor(options){
            console.log("MyPlugin constructor:", options);
        }
        apply(compiler){
            compiler.plugin("compilation", compilation => {
                console.log("MyPlugin");
            });
        }
    }
    module.exports = MyPlugin;
    
    
    webpack.config.js配置:
    module.exports = {
        ...
        plugins: [
            new MyPlugin({param: "my plugin"})
        ]
    }

    使用该plugin后,执行的顺序:

    1. webpack启动后,在读取配置的过程中会执行new MyPlugin(options)初始化一个MyPlugin获取其实例
    2. 在初始化compiler对象后,就会通过compiler.plugin(事件名称,回调函数)监听到webpack广播出来的事件
    3. 并且可以通过compiler对象去操作webpack
    展开全文
  • webpack 常用配置

    千次阅读 2019-12-09 15:52:53
    一、前言 webpack是目前前端开发中最流行的打包工具,不仅能实现 JS 打包,还能将 CSS 文件,图片文件,甚至是 LESS 文件打包,每一个文件都是一个独立的模块...二、常用 webpack 配置如下 module.exports = { ...
  • webpack学习笔记-1-css-loader & style-loader

    万次阅读 2017-06-27 21:35:23
    简要介绍了webpack css-loader和style-loader的使用
  • webpack 源码解析系列

    千次阅读 2018-04-09 14:33:00
    Webpack 源码解析 Webpack 作为前端领域最重要的构建工具,...这个系列总共包括8篇文章,首先分析我们常用的一些loader,然后看webpack核心代码的工作流程,最后探讨HMR以及tree-shaking等特性。 文章全部在github...
  • 前端面试之webpack

    万次阅读 多人点赞 2017-09-28 14:08:46
    还是以前一样,有些概念面试可能会考,我都用*标记了出来,两句话就总结清楚其余的地方如果你想了解...面试你一般问你webpack的原理,Loader的原理,你有用那些优化措施 前端开发已经模块化,它改进了代码库的封装
  • WebPack安装-使用-Loader-配置-插件-环境-排错详解(中) WebPack安装-使用-Loader-配置-插件-环境-排错详解(上)http://blog.csdn.net/pcaxb/article/details/53390151介绍了WebPack的安装-使用-Loader,WebPa
  • 手把手教你使用Webpack打包React项目

    万次阅读 2018-05-10 15:35:49
     webpack是一个前端资源加载/打包工具,前端的常用资源都可以作为一个模块导出,我们在代码中直接引用即可,最后按照我们的配置把代码打包整合起来。先来认识一下webpack的基本配置现在开发搭建开发环境第一步:在...
  • Webpack学习

    千次阅读 2020-10-19 09:24:00
    Webpack的介绍和使用:基本使用、打包 css 和图片文件、 测试环境下自动编译打包、使用 webpack 插件
  • webpack4.x下babel的安装、配置及使用

    万次阅读 2019-10-13 14:01:10
    前言 ...为了实现兼容,就需要使用转换工具对ES6语法转换为ES5语法,babel就是最常用的一个工具。那么在webpack中如何使用babel呢?这是本篇文章要探讨的问题。  写这篇文章的目的还在于最新webp...
  • webpack常见面试题

    千次阅读 2019-06-27 10:57:46
    1.从零开始搭建一个简单的基于webpack的vue开发环境 a.安装webpack npm i webpack -g b.项目初始化 1)新建项目文件夹‘myproject’ 2)创建package.json.。 npm init -y 3)安装vue,webpack,webpack-dev-...
  • webpack面试题汇总

    千次阅读 2018-11-21 09:56:24
    这是webpack系列文章的十一篇,整理了一些关于webpack的面试题,对之前的内容做一次总结 webpack官网https://webpack.js.org/ webpack中文网https://www.webpackjs.com/ 什么是webpack webpack是一个打包模块化...
  • 在Windows下使用webpack入门

    万次阅读 2017-04-14 22:18:26
    在Windows下使用webpack入门 1. webpack的打包示意图理解: 2. 前期准备 安装node 新建一个文件夹:webpack_test 3. 安装并使用webpack (1)在命令行下进入文件夹:webpack_test中,并初始化: (2) 在当前文件...
  • webpack-dev-server使用方法

    千次阅读 2019-08-09 09:03:44
    webpack-dev-server使用方法 首先来回顾以下webpack的内容 首先,我们来看看基本的webpack.config.js的写法 const path=require('path') //这个配置文件,其实就是一个JS文件,通过Node中的模块操作,向外暴露了一个...
  • webpack loader 列表

    千次阅读 2016-06-13 10:40:57
    约定loader一览表 扩展名 语义 loader举例 .js returns module exports babel-loader .ts returns module exports ts-loader .coffee returns module exports coffee-loader coffee-redux-loader .jsx
  • webpack配置多页面项目

    万次阅读 2018-02-04 23:34:25
    相信经常使用webpack的人已经深刻体验到自动化工具给我们带来的便利。我自己最常用的是vue,平时就是使用vue-cli或者nuxt构建的项目,聪明的前辈已经为我们配好了项目,可以让我们不必去配置就可以轻松使用。 然而在...
  • 本文简单介绍了 Happypack 的简单使用,不了解的同学可以进来看一看。...由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的任务要一个一个进行操作。 而 Happypack 的作...
  • webpack常用命令

    千次阅读 2017-12-23 15:15:27
    2.安装webpack依赖*npm install webpack --save-dev *npm info webpack : 查看webpack 信息 *npm install webpack@3.10.0 --save-dev : 安装指定版本的webpack 3.安装webpack开发工具*npm install webp
1 2 3 4 5 ... 20
收藏数 7,540
精华内容 3,016
关键字:

webpack 常用的loader