专栏首页互联网杂技laravel+react+webpack+babel+gulp的配置

laravel+react+webpack+babel+gulp的配置

laravel

composer create-project laravel/laravel --prefer-dist

npm

npm install gulp webpack -g
npm install react react-dom babel-loader babel-preset-es2015 babel-preset-react --save-dev

webpack.config.js

var path = require('path');
var config = {
 entry: path.resolve(__dirname, 'resources/assets/js/main.js'),
 output: {
 path: path.resolve(__dirname, 'public/js'),
 filename: 'bundle.js'
 },
 resolve: {
 extensions: ['', '.js', '.jsx']
 },
 module: {
 loaders: [
 {
 test: /\.jsx?$/,
 exclude: /node_modules/,
 loader: 'babel',
 query: {
 presets: ['es2015', 'react']
 }
 }
 ]
 }
};
module.exports = config;

main.js

import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(<h1>asd</h1>, document.getElementById('app'));

build

webpack -w

html

<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>react</title>
</head>
<body>
<div id="app"></div>
<script src="js/bundle.js"></script>
</body>
</html>

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何学习用Typescript写Reactjs?

    首先扫盲一下,先从搭建环境开始: 1.安装node,因为ts的编译器是js/ts写的; 安装node后同时获得npm命令,这是nodejs世界里的包管理器...

    前朝楚水
  • react+redux+webpack教程4

    接着上回新闻搜索的例子。现在我们要通过路由进入一个新的页面来查看新闻详细内容。 react和路由并没有什么直接关系,用什么路由都可以。不过使用react-rou...

    前朝楚水
  • 用于数学的 10 个优秀编程语言

    作为一个对数学和编程语言充满激情的人,谁也不能阻止我分享我总结的10个超棒的用于数学的编程语言。 正文共:2619 字 预计阅读时间:7 分钟 作为一个对数学...

    前朝楚水
  • python_web(三)一个简单web后端框架

    星辉
  • iOS基础问答面试题连载(三)-附答案

    2016-11-2319:56:15 发表评论 3,614℃热度 1.请简单说明多线程技术的优点和缺点? 2.请简单说明线程和进程,以及他们之间的关系? ...

    timhbw
  • ajax上传文件并且判断是否为空

    用户5899361
  • TS+React+Router+Mobx+Koa打造全栈应用

    MrTreasure
  • CSS

    常见的块元素有:ul列表、form表单、h1-h6标题、hr水平线、p段落、div

    木瓜煲鸡脚
  • 使用Python抓取欧洲足球联赛数据

    摘要: 本文介绍了Web Scraping的基本概念的相关的Python库,并详细讲解了如果从腾讯体育抓取欧洲联赛的详细数据的过程和代码。为下一步的大数据分析的...

    小莹莹
  • 使用Python抓取欧洲足球联赛数据

    数据的来源多种多样,以为我本身是足球爱好者,所以我就想提取欧洲联赛的数据来做一个分析。许多的网站都提供了详细的足球数据,例如: 网易 http://goal.s...

    机器学习AI算法工程

扫码关注云+社区

领取腾讯云代金券