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. 10行代码解析krc歌词文件

    互联网上,我们常见的歌词格式有 LRC.TRC(天天动听歌词).KRC(KuGou ResourCe,酷狗资源文件)和 QRC(QQ音乐歌词):在影视制作中,人们通常会用其他的卡拉 OK 字幕格式,例 ...

  2. 个人常用eclipse快捷键,不定期更新

    ctrl+f11 ==> runctrl+h ==> 全文检索main+enter ==>public static void main(String[] args) { } alt ...

  3. 【Servlet】Java Serlvet Listener 监听器

    Listener监听器 Servlet规范中定义的一种特殊的组件,用来监听Servlet容器产生的事件并进行相应的处理 容器产生的事件分类 - 生命周期相关的事件 - 设置和删除Attribute数据 ...

  4. SQL plan directives

    SQL plan directives SQL plan directives含有优化器产生优化的执行计划时需要的附加信息和指令. 在sql执行时,如果cardinality估计有错误,数据库就会创建 ...

  5. 还没被玩坏的robobrowser(3)——简单的spider

    背景 做一个简单的spider用来获取python selenium实战教程的一些基本信息.因为python selenium每年滚动开课,所以做这样一个爬虫随时更新最新的开课信息是很有必要的. 预备 ...

  6. jquery动态加载js/css文件方法

    先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS l ...

  7. Ubuntu 13.04 SSH其他机器连接慢的解决办法

    原来Windows上用Xshell,用这比较爽,命令open http,自动打开自己定义的http服务器SSH 远程连接,点一下文件传输,如果装了xsftp,自动启动xsftp,没有就来个提示,打开一 ...

  8. 谈谈MySQL的WriteSet并行复制

    [历史背景] 岁月更迭中我已经从事MySQL-DBA这个工作三个年头,见证MySQL从“基本可用”,“边缘系统可以用MySQL”,“哦操!你怎么不用MySQL”; 正所谓!“一个数据库的境遇既取决于历 ...

  9. javascript 20个正则表达式

    正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑.熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升. 正则表达式经常被用于 ...

  10. IOS 视频流

    https://github.com/kolyvan/kxmovie   demo 项目