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. MessagePack 学习笔记

    封装和解析类似json的  key-value 示例 {"ID" = 333,"name"="zds","3333"=& ...

  2. 树莓派进阶之路 (015) - 树莓派使用DS18B20模块测量温度

    参考:http://shumeipai.nxez.com/2013/10/03/raspberry-pi-temperature-sensor-monitors.html 第一步,允许单总线接口 su ...

  3. Vue.js 添加组件

    <!DOCTYPE HTML> <html> <head> <title>vue.js hello world</title> <sc ...

  4. C# 使用系统方法发送异步邮件

    项目背景: 最近在对几年前的一个项目进行重构,发现发送邮件功能需要一定的时间来处理,而由于发送是同步的因此导致在发送邮件时无法执行后续的操作 实际上发送邮件后只需要将发送结果写入系统日志即可对其他业务 ...

  5. java JDK JRE 1.6,1.7,1.8各个版本版本下载链接

    有时想找jdk的某个版本并不太好找,在此给出所有链接及对应的api JavaSE 1.6各个版本 jdk  api http://www.Oracle.com/technetwork/Java/jav ...

  6. log4j（三）——如何控制不同级别的日志信息的输出？

    一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 二:老规矩,先来个栗子,然后再聊聊感受 import org.apache.log4j.*; //by godtrue p ...

  7. 【C语言】练习1-21

    题目来源:<The C programming language>中的习题 练习1-21:编写程序entab,将空格串替换为最好数量的制表符和空格,但要保持单词之间的间隔不变. 思路: 对 ...

  8. pingback协议与traceback协议的区别

    wordpress 的 pingback协议与traceback协议区别

  9. Mapped Statements collection does not contain value for com.xxxx.dao.impl.AreaDAOImpl.findByCode

    org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.Persiste ...

  10. mysqlslap 压力测试工具

    [背景] 由于一些不可描述的原因,我要确定一条业务SQL在给定的MySQL环境下的执行效率:比如说200个session同时跑同样一条SQL 我们数据库的吞吐量怎么样? 刚收到这个需求的时候,感觉这个 ...