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. linux磁盘相关命令

    一.查看文件夹大小du du -h -d1 2>/dev/null 解释: h表示以可读性较好的方式显示,即带单位显示 d表示深度depth,为1表示只显示当前目录下文件的大小 2>/de ...

  2. 在 iOS 中实现方法链调用

    编译:伯乐在线 - 林欣达 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 前言 链式调用(chained calls)是指在函数调用返回了一个对象的时候,使得这个调用链 ...

  3. TestNg的IReporter接口的使用

    IReporter接口是干嘛的?就是让用户自定义报告的,很多人想要自定义报告,于是乎找各种插件,比如什么testng-xslt啊,reportng啊,各种配置,最后出来的结果,还不能定制化,但为什么不 ...

  4. Fedora下安装deb包方法

    Linux系统提供一个软件alien, 使用它能够把deb包转换成各种格式. 1. 使用yum install alien 2. 安装完成后,执行 alien -r XXXXX.deb, 即可转换成对 ...

  5. 【MyBatis】解析MyBatis传入参数的问题

    一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...

  6. block（七）__block和__weak的区别-b

    在MRC下,我们通常使用__block , 而在ARC下我们通常使用__weak , 或者__unsafe_unretaine __block(不安全,不建议使用) 来修饰对象防止循环引用而造成的内存 ...

  7. spring 定时任务执行两次解决办法

    在web.xml中同时配置了ContextLoaderListener和DispatcherServlet?假如真是这样的话,需要删掉一个配置,因为你相当于配置了两个spring容器,两个容器分别都执 ...

  8. MySQL -- 全文检索(自然语言全文检索)

    自然语言全文本检索缺省或者modifier被设置为in natural language mode,都是进行自然语言检索.对于表中的每一行,match()都会返回一个关联值. mysql> CR ...

  9. 你的应用是怎样被替换的，App劫持病毒剖析

    一.App劫持病毒介绍 App劫持是指运行流程被重定向,又可分为Activity劫持.安装劫持.流量劫持.函数运行劫持等. 本文将对最近利用Acticity劫持和安装劫持的病毒进行分析. 二.Acti ...

  10. 关于埃博拉病毒的基本知识（ABC）

    科学研究表明.埃博拉病毒的存在历史很久远,可能有两千多万年的历史,在类人猿出现的时期就已存在. 埃博拉病毒呈现一种"蚕丝状",又细又长,无色透明.直径有80纳米,长短不等,在14微 ...