这一篇来讲解一下webpack的loader的使用,用webpack打包文件,css,img,icon等都需要下载安装对应的loader文件,并且写好配置项,才可以进行打包,废话不多说,直接开始实战。

先建立一个components文件夹来存放组件,下面新建一个layer文件夹来存放layer这个组件相关的代码。

layer文件建立如下相关的文件:

然后在webpack.config.js文件添加如下配置:

建立一个app.js打包的入口文件:

在这个文件中将组件的模块都引用进来。

然后建立一个loader.html模板文件。

现在开始进行打包,发现会报错,因为我们在app.js的入口文件里面引用了css文件。

在layer组件的laye.js里面也引用了less文件,在less文件里面又引用了img图片以及css3样式,以及一个模板文件layer.tpl

具体请看layer.js的代码。

要正确的打包这些东西我们就需要安装对应的loader文件。

首先安装打包css的loader  执行:npm install css-loader style-loader --save-dev

然后写上配置代码:

发现后面有一个postcss-loader这个是一个css后处理的loader结合autoprefix插件使用可以添加css3的兼容前缀。

需要先安装这个loader:npm install postcss-loader --save-dev 然后再安装autoprefixer插件:npm install autoprefixer --save-dev。

安装之后需要在webpack.config.js文件下添加如下代码:加在里面

还需要在前面引用webpack才可以正确解析:

打包之后发现自动生成了:css3前缀

安装less-loader:npm install less-loader --save-dev

添加less的配置

安装es6语法bable解析器:npm install babel-loader babel-core --save-dev

在安装最新版本的latest版本解析器:npm install babel-preset-latest

然后建立一个.babelrc的babel解析配置文件,里面添加如下代码:

再在webpack.config.js文件加上js的解析配置:

安装项目中处理模板文件的loader:npm install html-loader --save-dev

ejs-loader解析模板数据 npm install ejs-loader --save-dev

安装打包loader:npm install file-loader --save-dev来打包图片文件。

到此基本的loader已经介绍完了,详细请下载代码:

实例讲解webpack的基本使用第四篇的更多相关文章

  1. 实例讲解webpack的基本使用第三篇

    这一篇来讲解一下webpack的htmlWebpackHtml插件的使用. 先来思考一个实际问题:我们现在在index.html引用的js文件是写死的.但是我们每次打包后的文件都是动态的,那么我们怎么 ...

  2. 实例讲解webpack的基本使用第二篇

    这一篇来讲解一下如何设置webpack的配置文件webpack.config.js 我们新建一个webpack-demo的项目文件夹,然后安装webpack 执行如下命令 在项目文件夹下,建一个dis ...

  3. 实例讲解webpack的基本使用第一篇

    更新文章不容易,尤其是更新高质量的文章更加不易,因此为了节约时间,闲话就不多说了.关于webpack的介绍,webpack是用来干嘛的,这些基础概念性的东西,就不在此赘述,下面直接开始正题. webp ...

  4. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

  5. float实例讲解

    float实例讲解 float是个强大的属性,在实际前端开发过程中,人们经常拿它来进行布局,但有时,使用的不好,也麻烦多多啊. 比如,现在我们要实现一个两列布局,左边的列,宽度固定:右边的列,宽度自动 ...

  6. S3C2440上RTC时钟驱动开发实例讲解(转载)

    嵌入式Linux之我行,主要讲述和总结了本人在学习嵌入式linux中的每个步骤.一为总结经验,二希望能给想入门嵌入式Linux的朋友提供方便.如有错误之处,谢请指正. 共享资源,欢迎转载:http:/ ...

  7. 基于tcpdump实例讲解TCP/IP协议

    前言 虽然网络编程的socket大家很多都会操作,但是很多还是不熟悉socket编程中,底层TCP/IP协议的交互过程,本文会一个简单的客户端程序和服务端程序的交互过程,使用tcpdump抓包,实例讲 ...

  8. makefile基础实例讲解 分类: C/C++ 2015-03-16 10:11 66人阅读 评论(0) 收藏

    一.makefile简介 定义:makefile定义了软件开发过程中,项目工程编译链.接接的方法和规则. 产生:由IDE自动生成或者开发者手动书写. 作用:Unix(MAC OS.Solars)和Li ...

  9. 实例讲解js正则表达式的使用

    前言:正则表达式(regular expression)反反复复学了多次,学了又忘,忘了又学,这次打算把基本的东西都整理出来,加强记忆,也方便下次查询. 学习正则表达式之前首先需要掌握记忆这些基本概念 ...

随机推荐

  1. JSP编译指令与动作指令

    下面这个面试经常问到,要理解. 上面这个效果一样,重点.   <jsp:include>动作在请求期间被执行,而include指令在编译期页面间被执行.

  2. 使用jmeter进行批量数据创建

    背景: 测试环境需要创建大量的测试数据,进行功能和性能的测试 测试数据创建接口是HTTP请求方式 测试数据要求不同类型的数据,要有字段进行关联,且单据的编号在DB中唯一不可重复,此外测试数据的时间类参 ...

  3. MyBatis框架知识整理

    MyBatis框架 一.介绍: MyBatis实际上是Ibatis3.0版本以后的持久化层框架[也就是和数据库打交道的框架]! 和数据库打交道的技术有: 原生的JDBC技术---> Spring ...

  4. jmeter系列-------脚本调试

    1.调试的时候 可以只跑需要调试的接口,禁用其他的接口 2.每个接口都需要增加断言眼,保证脚本的结果的正确性 3.验证脚本的可靠性,可以切换用户(测试变量)来进行调试 4.使用Debug Sample ...

  5. 前端开发【第一篇:HTML】

    HTML初识 1.什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都 ...

  6. java中的jdk切换(无需卸载原有jdk)

    该转自 :  http://blog.csdn.net/u010011371/article/details/50749954 很好的一片文章,适合我这种小白,方便以后使用. 之前一直使用的是JDK1 ...

  7. Spring《错误集合,总结更新》

    1.这几天配置springmvc 使用注解,并且自动扫描注解,当我单个配置,不用自动扫描,出现下面错误,找了很多人跟我看,配置也没问题,但是就是显示不出东西,所说的类也去看了,没有问题 這是我的模拟数 ...

  8. OSX 10.8+下开启Web 共享 的方法

    MENU Home Archives About SUBSCRIBE ☰MENU OSX 10.8+ Mountain Lion 下开启 Web Sharing(Web 共享)的方法 JUL 28, ...

  9. 201521123027 <java程序设计>第七周学习总结

    1.本周学习总结 2.书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 答: 源代码: //contains()方法 public boolean c ...

  10. 201521123031 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...