在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就是告诉Webpack要做什么。

一个最简单的Webpack配置文件webpack.config.js如下所示:

module.exports = {
entry:[
'./app/main.js'
],
output: {
path: __dirname + '/assets/',
publicPath: "/assets/",
filename: 'bundle.js'
}
};

  其中:

entry:定义了打包后的入口文件,数组中的所有文件会按顺序打包。每个文件进行依赖的递归查找,直到所有相关模块都被打包。

output:定义了输出文件的位置,其中常用的参数包括:

  • path: 打包文件存放的绝对路径
  • publicPath: 网站运行时的访问路径
  • filename: 打包后的文件名
现在来看如何打包一个React组件。假设有如下项目文件夹结构:

- react-demo+ assets/
- js/
Hello.js
entry.js
index.html
webpack.config.js

其中Hello.js定义了一个简单的React组件,使用ES6语法:

var React = require('react');
class Hello extends React.Component {
render() {
return (
<h1>Hello {this.props.name}!</h1>
);
}
}

entry.js是入口文件,将一个Hello组件输出到界面:

var React = require('react');
var Hello = require('./Hello');
React.render(<Hello name="World" />, document.body);

index.html的内容如下:

<html>
<head></head>
<body>
<script src="/assets/bundle.js"></script>
</body>
</html>

在这里Hello.js和entry.js都是JSX组件语法,需要对它们进行预处理,这就要引入webpack的JSX加载器。因此在webpack.config.js 配置文件中加入如下配置:

module: {
loaders: [
{ test: /\.jsx?$/, loaders: ['jsx?harmony']}
]
}

加载器的作用是它能将JSX编译成JavaScript并加载为Webpack模块这样在当前目录执行webpack命令之后,在assets目录将生成bundle.js,打包了entry.js的内容。当浏览器打开当前服务器上的index.html,将显示“Hello World”。这是一个非常简单的例子,演示了如何使用Webpack来进行最简单的React组件打包。

 

react webpack.config.js 入门学习的更多相关文章

  1. react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false

    react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false

  2. webpack前端构建工具学习总结(三)之webpack.config.js配置文件

    Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...

  3. webpack学习笔记(3)--webpack.config.js

    module 参数 使用下面的实例来说明 module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { ...

  4. webpack3中文版使用参考文档--全面解析webpack.config.js

    Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...

  5. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

  6. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  7. webpack.config.js配置文件

    1.基本配置 webpack在执行时,除在命令行传入参数,还可以通过指定的配置文件来执行.默认会搜索当前目录下webpack.config.js.这个文件是一个node.js模块,返回一个json格式 ...

  8. webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题

    下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...

  9. [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

随机推荐

  1. 最小化安装centos7下配置网络

    虚拟机操作系统:centos7.0 命令行模式 1.首先明确centos7在最小化安装完是不支持上网的,相应的查看网络以及修改网络参数是不能使用的,最常见的就是我们常用的ifconfig. 2.找到网 ...

  2. 关于领域驱动设计(DDD)仓储的思考

    为什么需要仓储呢?领域对象(一般是聚合根)的被创建出来后的到最后持久化到数据库都需要跟数据库打交道,这样我们就需要一个类似数据库访问层的东西来管理领域对象.那是不是我们就可以设计一个类似DAL层的东东 ...

  3. JavaScript基础11——js的全局函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. AngularJS(一)

      <!doctype html> <html ng-app=""> <!-- ng-app指令标记了AngularJS脚本的作用域 --> & ...

  5. while循环语句的使用

    说明:先判断表达式,后执行语句,while循环称为当型循环. 如果指定的条件为真(表达式为非0)时,执行while语句中的内嵌语句. 格式:while (表达式)   //判断括号内表达式 真(tru ...

  6. javascript的三个组成部分

    javascript是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成: ECMAScript,由ECMA-262定义,提供核心语言功能; 文档对象模型(DOM),提供访问和操作网页内容的 ...

  7. String.format() 格式化字符串

    1.几种常见的转换符 转换符 说明 实例 %d 整数类型(十进制) 99 %f 浮点类型 99.99 %s 字符串类型 "mingrisoft" %c 字符类型 'm' %b 布尔 ...

  8. EL表达式概述

    E L(Expression Language) 目的:为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 JSP 中简化表达式的方法. ...

  9. 【读书笔记】iOS-NSDictionary与NSArray的比较

    有时候为什么不用数组存储然后在数组里查询数值呢?字典(也称为散列表或关联数组)使用的是键查询的优化存储方式.它可以立即找出要查询的数据,而不需要遍历整个数组进行查找.对于频繁的查询和大型的数据集来说, ...

  10. 招聘一个靠谱的 iOS程序员

    一个靠谱的简历 简历非常能反映一个人的性格和水平,相比于你在学校获得多少奖项,工作经历.项目经 历.熟悉的技术等更加关键,如果还有博客和一些 Github 上的项目,好感度++,但记得在去面试前收拾下 ...