Webpack--loaders

CntChen 发布于2019-08-19 18:09 / 1333人阅读

摘要：在文件中配置和一样的语法配置的选项，支持的校验使用不支持或者规范的插件以为例注意这种写法这个变量直接插入到里面了相当于在这个文件的开始添加了献上师傅的文章傻瓜式指南傻瓜式指南

1.总体介绍

不同资源不同loader，否则加载失败；

//loaders类似modules，exports的一个方法
//默认Webpack只处理javaScript；
//你的资源里有图片、css、html...如果没有相应的loader，人家不认识你；

可以通过全名XX-loader或短名xx引用；
loaders可以链式写，用!分离loaders和resource，如针对样式loader:(style!css!sass)
loaders处理后的资源会用js语法包裹，最终返回js---------Webpack只处理javaScript
注意：loaders链式写的时候，[预]处理工具从右到左应用！！！如下：

require("style!css!less!bootstrap/less/bootstrap.less");

对bootstrap/less/bootstrap.less先进行less解析再css解析再style解析，最终返回js

loaders可以接受查询参数--------具体处理工具查看对应文档；

用?引导query string，如url-loader?mimetype=image/png
查询格式 
    ?key=value&key2=value2 
    或 JSON对象 
    ?{"key":"value","key2":"value2"}.

2. loader用法

1.通过require显性声明----------不推荐
    只能处理某一明确的目录文件；
    require("!style!css!less!bootstrap/less/bootstrap.less");-----只处理bootstrap/less文件下的bootstrap.less
        
2.通过webpack.config.js配置---------推荐
    通过正则表达式来绑定loaders----匹配一类文件
        {
            module: {
                loaders: [
                    { 
                        //匹配.jade结尾的文件；
                        test: /.jade$/, 
                        loader: "jade"，
                        query:{}
                    },
                    { 
                        //匹配.css结尾的文件；
                        test: /.css$/,
                        //链式loaders写法一，从右往左解析
                        loader: "style!css" ，
                        query:{}
                    },
                    { 
                        test: /.css$/,
                        //链式loaders写法一，从右往左解析
                        loaders: ["style", "css"]  ，
                        query:{}
                    },
                    { 
                        test: /.scss$/,
                        //针对sass的解析，有依赖环境，可能是ruby……
                        //在linux中，如果报错，删除sass-loader，重新npm init下
                        loaders: ["style", "css","sass"]  ，
                        query:{}
                    },
                ]
            }
        }
        
    3.命令行-------忽略

3. 使用preLoaders和postLoaders

perLoaders顾名思义就是在loaders执行之前处理的，webpack的处理顺序是perLoaders - loaders - postLoaders。

module: {
    //在config文件中配置,和loaders一样的语法
    perLoaders: [
        {
            test: /.jsx?$/,
            include: APP_PATH,
            loader: "jshint-loader"
        }
    ]
},
//配置jshint的选项，支持es6的校验
jshint: {
  "esnext": true
}

4. 使用imports-loader不支持AMD或者CommonJS规范的插件

//以jquery为例
npm install imports-loader --save-dev
npm install jquery -save

//注意这种写法 jQuery这个变量直接插入到plugin.js里面了
//相当于在plugin.js这个文件的开始添加了 var jQuery = require("jquery");
import "imports?jQuery=jquery!./plugin.js";

5 献上师傅的文章

Webpack傻瓜式指南1
Webpack傻瓜式指南2

云服务器 GPU云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79251.html

webpack学习笔记

摘要：配置完成后就可以使用来打包代码了。值得注意的是会删除所有无作用代码也就是说那些包裹在这些全局变量下的代码块都会被删除这样就能保证这些代码不会因发布上线而泄露。默认会从项目的根目录下引入这些文件。命令使用 npm install webpack -g 作为全局安装, 在任意目录使用 npm install webpack --save-dev 作为项目依赖安装 np...

mylxsw 2019-08-21 10:36 评论0 收藏0
React 和 ES6 工作流之 Webpack的使用（第六部分）

摘要：在上面的列表中，是自解释型的。我们将使用后者。调整文件的内容到这一步，这个应用就具备热刷新的功能。下一步，更新文件中的到现在为止，如果你在控制台运行压缩文件将被创建并且放在路径下面。这是React和ECMAScript2015系列文章的最后一篇，我们将继续探索React 和 Webpack的使用。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） Rea...

Mr_houzi 2019-08-20 17:59 评论0 收藏0
React 和 ES6 工作流之 Webpack的使用（第六部分）

摘要：在上面的列表中，是自解释型的。我们将使用后者。调整文件的内容到这一步，这个应用就具备热刷新的功能。下一步，更新文件中的到现在为止，如果你在控制台运行压缩文件将被创建并且放在路径下面。这是React和ECMAScript2015系列文章的最后一篇，我们将继续探索React 和 Webpack的使用。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） Rea...

yunhao 2019-08-01 17:10 评论0 收藏0
最小白的webpack+react环境搭建

摘要：接下来安装和，执行命令安装很顺利，没有遇到任何问题。再总结一下我们遇到的坑初始化时的项目名称要合规，特别是不能出现中划线下划线。另外再增加，这样刷新的速度会大大加快最终的文件目录结构为各文件的最终内容本文也同步发表在我的公众号“我的天空” 从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。最近在玩webpack+rea...

番茄西红柿 2019-04-23 13:28 评论0 收藏0