wepack学习(二)

loader的使用

loader:

在上一篇文章中,我们的两个js文件都是纯粹的js文件,webpack一般会和一些框架联合使用,以我正在学的react为例,我们需要打包js,css文件

1,component里面只需要暴露一个集成的模块messageBoard这个文件,我们再main.js文件(wepack入口文件)里面引入这个文件使用

var React=require("react");
var path=require("path")
var ReactDOM=require("react-dom");
var MessageBoard=require("../component/messageBoard");
ReactDOM.render(<MessageBoard title="message"/>,
      document.getElementById("container")
)

2,利用webpack打包,在index.html文件中加载的是打包完的文件,bundle.js这个文件,配置webpack.config.js

var path=require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports={
	entry:"./js/main.js",
	output:{
		path:path.join(__dirname,"js/build"),
		filename:"bundle.js"
	},
	module: {
	    loaders: [
	      {test:/\.css$/,loader:"style-loader!css-loader"},
	      {test: /\.js$/, loader: ‘jsx-loader‘}
	    ]
    }
}

我们引入了module,loaders,当然首先要安装jsx-loader,style-loader,css-loader这三个依赖的模块,需要注意的是style-loader和css-loader顺序不能错

打包完的结果是js已经打包成bundle.js了,如果你需要引入样式表需要在main.js里面添加 require("../css/main.css");  ,然后css文件已经作为内部样式表通过,添加了<style>标签在DOM里面

时间: 2024-08-17 12:09:43

wepack学习(二)的相关文章

[Python 学习] 二、在Linux平台上使用Python

这一节,主要介绍在Linux平台上如何使用Python 1. Python安装. 现在大部分的发行版本都是自带Python的,所以可以不用安装.如果要安装的话,可以使用对应的系统安装指令. Fedora系统:先以root登入,运行 yum install python Ubuntu系统:在root组的用户, 运行 sudo apt-get install python 2. 使用的Python的脚本 Linux是一个以文件为单位的系统,那么我们使用的Python是哪一个文件呢? 这个可以通过指令

OpenCV for Python 学习 (二 事件与回调函数)

今天主要看了OpenCV中的事件以及回调函数,这么说可能不准确,主要是下面这两个函数(OpenCV中还有很多这些函数,可以在 http://docs.opencv.org/trunk/modules/highgui/doc/user_interface.html 找到,就不一一列举了),然后自己做了一个简单的绘图程序 函数如下: cv2.setMouseCallback(windowName, onMouse[, param]) cv2.createTrackbar(trackbarName,

Makefile持续学习二

Makefile概述 一.Makefile里有什么? Makefile里主要包含5个东西:显式规则.隐晦规则.变量定义.文件指示和注释 1.显式规则:显式规则说明如恶化生成一个或多的目标文件,包含要生成的文件,文件的依赖文件,生成的命令 2.隐晦规则:由make自动推动功能完成 3.变量定义:变量一般都是字符串,类似C语言中的宏定义,当Makefile被执行时,其中的变量都会被扩展到相应的引用位置上 4.文件指示: 在一个Makefile中引用另一个Makefile 根据某些情指定Makefil

redis ruby客户端学习( 二)

接上一篇redis ruby客户端学习( 二) 对于redis的五种数据类型:字符串(String), 哈希(Map), 列表(list), 集合(sets) 和 有序集合(sorted sets),上一篇介绍了字符串. 1,哈希(Map) hset.设置 key 指定的哈希集中指定字段的值.如果 key 指定的哈希集不存在,会创建一个新的哈希集并与 key 关联.如果字段在哈希集中存在,它将被重写. require "redis" r = Redis.new r.hset 'my_h

Duilib学习二 第一个程序 Hello World

Duilib学习二  第一个程序 Hello World #pragma once #include <UIlib.h> using namespace DuiLib; #ifdef _DEBUG # ifdef _UNICODE # pragma comment(lib, "DuiLib_ud.lib") # else # pragma comment(lib, "DuiLib_d.lib") # endif #else # ifdef _UNICOD

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

Oracle学习(二):过滤和排序

1.知识点:可以对照下面的录屏进行阅读 SQL> --字符串大小写敏感 SQL> --查询名叫KING的员工信息 SQL> select * 2 from emp 3 where ename = 'KING'; SQL> --日期格式敏感 SQL> --查询入职日期为17-11月-81的员工 SQL> select * 2 from emp 3 where hiredate='17-11月-81'; --正确例子 SQL> ed 已写入 file afiedt.b

Jetty学习二:配置概览-怎么配置Jetty

Jetty POJO配置 Jetty的核心组件是Plain Old Java Objects(POJOs):配置Jetty的大部分工作就是在Jetty POJOs上的初始化.装配和设置域的处理,你能通过以下的方式来实现:  1)直接通过Java代码初始化和装配Jetty对象.这个在后面Embedding Jetty讲. 2)用Jetty XML配置(一个控制反转(IoC)框架)初始化和装配Jetty对象.etc/jetty.xml文件是基本的Jetty XML配置文件,但有一些其它的etc/je

nodejs学习二 深入了解console

上一篇我们用console.log编写了第一个程序,虽然如此简单.那么我就从它来说说Node.js中的对象. 对于学过Java .net 的人来说,对象这个词应该都很亲切,如果不觉得亲切,还是先学习一下面向对象. 我们编程中,一切皆对象.你可以把任何一个东西当做对象. 然而,Node.js中也存在对象,而console也是一种对象.既然是对象,他应该有公有的方法.正如你所看到的,log就是它的方法,貌似还是静态的. 那么console中有哪些方法呢,那我们就让他输出一下吧. 噢,原来consol

JBPM学习(二):ProcessEngine与Service API

1.获取processEngine的方法: a) 方法一 private ProcessEngine processEngine = new Configuration().setResource("jbpm.cfg.xml").buildProcessEngine(); b) 方法二 // 获取单例的ProcessEngine对象,使用的是默认的配置文件(jbpm.cfg.xml) private ProcessEngine processEngine = Configuration