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. Pinyin4j导读

    Pinyin4j是Java中的拼音库,作者李民. 拼音这件事其实非常简单,无非是一种映射.但是拼音中包含的学问很多,很多前贤都研究过汉语拼音,提出了多种拼音方案.随着历史变迁,拼音的形式也在不断发生变 ...

  2. NSObject协议中方法：description 和 debugDescription

    description基本概念 1.NSLog(@"%@", objectA);这会自动调用objectA的description方法来输出ObjectA的描述信息. 2.desc ...

  3. 保证java的jar包在后台运行

    nohup  java -jar XX.jar >temp.text &

  4. 【Java】详解菜单组件

    在这篇文章中,笔者会介绍Java图形界面编程中菜单组件的用法.关于菜单组件,因为java存在AWT编程和Swing编程,所以菜单组件也存在AWT菜单和Swing菜单.因为Swing组件使用的比较多,所 ...

  5. 【Linux】进程优先级、进程nice值和%nice

    用top或者ps命令会输出PRI/PR.NI.%ni/%nice这三种指标值,这些到底是什么东西?先给出大概的解释如下: PRI :进程优先权,代表这个进程可被执行的优先级,其值越小,优先级就越高,越 ...

  6. html5+php实现文件拖动上传功能

    界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传 ...

  7. 图床神器：七牛云 + Mpic + FScapture

    概述 最近在搞Markdown的东西,遇到了一个很棘手的问题,即图片的显示:通用的图片,可以直接网上搜索,但有时候需要自己截一些图或者对下载的图片进行修改,在本地存储完全没有问题,但Markdown写 ...

  8. java web项目中打开资源文件中文乱码

    1 java web项目中经常使用多模块管理.在某一个模块中添加了一些资源文件.但不是启动项目.有时候需要在程序中读取资源文件内容,打包后放到容器中就不能正常运行了.需要将所有资源文件放到启动项目的 ...

  9. 基于数据库构建分布式的ID生成方案

    在分布式系统中,生成全局唯一ID,有很多种方案,但是在这多种方案中,每种方案都有有缺点,下面我们之针对通过常用数据库来生成分布式ID的方案,其它方法会在其它文中讨论: 1,RDBMS生成ID: 这里我 ...

  10. Hadoop JobTracker和NameNode运行时参数查看

      1)JobTracker运行时参数: hadoop@ubuntu:/home/zhangchao3$ ps -ef | grep job hadoop 29563 1 0 11:34 pts/12 ...