http://lxj8749.iteye.com/blog/2287074

**********************************************

安装webpack

npm i webpack --save-dev

如果使用 -g参数，可以安装到全局使用，在当前目录安装，可执行文件为 ./node_modules/.bin/webpack

配置webpack.config.js

    var path = require('path');

    module.exports = {

        entry: path.resolve(__dirname, 'src/index.js'),

        output: {

            path: path.resolve(__dirname, 'build'),

            filename: 'bundle.js',

        },

    };

entry为打包的入口文件，output为打包后生成的文件名及路径。

源代码可以编写成多个文件，然后由入口文件调用组装，相互独立的组件最好分别单独写在一个文件中

打包源文件

在当前目录执行webpack 或 ./node_modules/.bin/webpack 命令，就可以将源文件打成生成build/bundle.js文件，网页中直接作用<script src="build/bundle.js"></script>来调用即可

本地开发调试

先安装 webpack-dev-server

npm i webpack-dev-server --save

在package.json文件中scripts下面添加相应的配置（可以使用npm init来生成package.json文件）

    {

      "scripts": {

        "build": "webpack",

        "dev": "webpack-dev-server  --port 8080  --inline --content-base ./build"

      }

    }

--inline加入该参数可以实现自动刷新，

在当前目录执行 npm run dev,执行完成后，在文件夹build中新建index.html，加入如下代码

    <!doctype html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>tests</title>

    </head>

    <body>

    <div id="react-content"></div>

    <script src="./bundle.js"></script>

    </body>

    </html>

在浏览器中打开 http://localhost:8080 就可以实时查看效果，修改后代码后，需要刷新才能查看到效果。执行npm run build可以打包，相当于执行webpack命令

Cannot GET / 错误

是由于package.json中的

"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

build文件夹不存在

配置react和babel

安装react

npm install react --save

安装babel相关组件，让webpack自动转换jsx，

npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev

在webpact.config.js的module的loaders中增加相应配置

    module: {

          loaders: [

            {

              test: /\.jsx?$/,

              exclude: /(node_modules|bower_components)/,

              loader: 'babel', // 'babel-loader' is also a legal name to reference

              query: {

                presets: ['react', 'es2015']

              }

            }

          ]

     }

配置完成后，在js或jsx文件中就可以直接写jsx语法

babel编译es6和jsx

先安装babel-cli

npm install -g babel-cli

再执行

babel src -d dist --presets react,es2015

src 为源文件目录，dist为编译输出目录，--presets 预置插件

支持es7语法

es7语法分四个阶段分别对应四个插件

babel-preset-stage-0

babel-preset-stage-1

babel-preset-stage-2

babel-preset-stage-3

选择一个加载就能正确解析es7语法

配置.less

先安装less编译器

npm install less css-loader less-loader  style-loader --save-dev

在webpact.config.js的module的loaders中增加相应配置

{test: /\.less$/,loader: "style!css!less"}

配置图片及字体文件

安装url-loader,修改webpact.config.js的module的loaders中增加相应配置

    {test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}

react,babel只能安装在当前目录，安装在全局无效，提交到github时需要把这些模块排除掉

npm安装依赖

在当前目录执行npm install会根据当前目录下的package.json文件，把需要的依赖都下载安装

 npm升级到3

npm install npm@3.0 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>菜鸟教程 React 实例</title>

  </head>

  <body>

    <div id="example"></div>

    <script src="bundle.js"></script>

  </body>

</html>
import React from 'react';

import ReactDOM from 'react-dom';

import {Button} from 'uxcore';

ReactDOM.render(<Button />, document.getElementById('example'));
const path = require('path');

module.exports = {

  entry: './src/index.jsx',

      module: {

          loaders: [

            {

              test: /\.jsx?$/,

              exclude: /(node_modules|bower_components)/,

              loader: 'babel-loader', // 'babel-loader' is also a legal name to reference

              query: {

                presets: ['react', 'es2015']

              }

            }

          ]

     }  ,

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist')

  }

};

webpack打包调试react并使用babel编译jsx配置方法的更多相关文章

  1. React系列文章：Babel编译JSX生成代码

    上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...

  2. Webpack打包构建太慢了？试试几个方法

    Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...

  3. Webpack打包css后z-index被重新计算的解决方法

    发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...

  4. webpack 打包调试

    本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶. 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hell ...

  5. 在react项目中启用mobx的配置方法

    1.安装插件 npm install --save-dev babel-preset-mobx mobx mobx-react 2.package.json配置 "dependencies& ...

  6. webpack 打包图片资源

    webpack 打包图片资源 /** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 */ // 用来拼接绝对路径的方法 const {res ...

  7. 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

    拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...

  8. React项目构建（利用webpack打包）

    引言 最近React作为当前最为火热的前端框架.最近也相继而出来相关ES7的新语法. 当然,在使用React开发web项目的时候,不得不提到的就是与之配套的相应的打包技术,之前上文已经简单的提到Rea ...

  9. 成功解决react+webpack打包文件过大的问题

    最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...

随机推荐

  1. libev ev_io_init学习

    #define ev_io_init(ev,cb,fd,events) / do { ev_init ((ev), (cb)); ev_io_set ((ev),(fd),(events)); } w ...

  2. 【虚拟化系列】VMware vSphere 5.1 简介与安装

    一. VMware vSphere 5.1简介           vSphere是VMware推出的基于云计算的新一代数据中心虚拟化套件,提供了虚拟化基础架构.高可用性.集中管理.监控等一整套解决方 ...

  3. C语言学习笔记 (006) - 二维数组传参的三种表现形式

    # include <stdio.h> # include <stdlib.h> # define M # define N int getdate(int (*sp)[M]) ...

  4. Ubuntu 12.04嵌入式交叉编译环境arm-linux-gcc搭建过程图解

    Linux版本:Ubuntu 12.04 内核版本:Linux 3.5.0 交叉编译器版本:arm-linux-gcc-4.4.3 交叉编译器下载 见这篇文章http://www.linuxidc.c ...

  5. Fusion-io ioDrive Duo Enterprise PCIe Review

    原文地址:http://www.storagereview.com/fusionio_iodrive_duo_enterprise_pcie_review As part of StorageRevi ...

  6. 重整ADO.NET连接池相关资料

    https://msdn.microsoft.com/zh-cn/library/system.data.sqlclient.sqlconnection.connectionstring(VS.80) ...

  7. MVC2 扩展Models和自定义验证(学习笔记)

    当我们利用Visual Studio生成实体类以后,难免会用到验证功能(例如,用户登录时验证用户名是否为空,并加以显示). Visual Studio实体类:实体类 如果直接去编辑Visual Stu ...

  8. SharePoint 2013 Designer工作流——Parallel Block的应用

    参考目录 安装和配置SharePoint 2013 Workflow SharePoint 2013 实现多级审批工作流 在自定义Workflow时,往往会遇到这样场景,某个审批需要被多人查阅,每个查 ...

  9. HTML5无刷新修改URL

    HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...

  10. Android 数据分析系列一：sharedPreferences

    Android数据存储方式,包括下面四种: 1. Shared Preferences:用来存储"key-value"paires格式的数据,它是一个轻量级的键值存储机制,只可以存 ...