这一篇来讲解一下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. 最大流isap模板

    isap+bfs初始化+栈优化,点的编号从0开始: ; ; const int INF = 0x3f3f3f3f; struct Edge { int to, next, cap, flow; }ed ...

  2. 为什么Java字符串是不可变对象?

    转自 http://developer.51cto.com/art/201503/468905.htm 本文主要来介绍一下Java中的不可变对象,以及Java中String类的不可变性,那么为什么Ja ...

  3. 网络协议UDP

    ------------------------------互联网协议与协议族------------------------------tcp/ip协议介绍:计算机网络协议,不同类型不同厂家之间的终 ...

  4. myeclipse eclipse创建maven web项目时 index.jsp报错

    第一种办法 解决办法: ---------------------------------------------------------------------------------------- ...

  5. JS源生代码“增删改查”之增

    51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示: 下面是有关HTML的代码:这个主要是弹窗部 ...

  6. jquery_mobile事件

    1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  7. Project 7:自然数的拆分

    自然数的拆分:任何一个大于1的自然数N,总可以拆分成若干个自然数之和,并且有多种拆分方法.例如自然数5,可以有如下一些拆分方法: 5=1+1+1+1+1 5=1+1+1+2 5=1+2+2 5=1+4 ...

  8. NHibernate教程(21)——二级缓存(下)

    本节内容 引入 使用NHibernate二级缓存 启用缓存查询 管理NHibernate二级缓存 结语 引入 这篇我还继续上一篇的话题聊聊NHibernate二级缓存剩下的内容,比如你修改.删除数据时 ...

  9. Domain Driven Design

    在Spring官网的第一个tutorial中看到了这种 设计模式 Domain Driven Design 找到了篇介绍这个得文章: What is Domain Driven Design? &qu ...

  10. CCIE-MPLS VPN-实验手册(下卷)

    10:跨域的MPLS VPN (Option A) 10.1 实验拓扑 10.1 实验需求 a.       R1 R2 R3 组成P-NETWORK R1 R2 R3 位于AS 1,底层协议采用EI ...