<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<head><meta forua="true" http-equiv="Cache-Control" content="max-age=0" /></head>
<card title="webpack配置.jsx文件由babel来解析，出现：babel没能识别我 js 文件中的 jsx 语法?" id="card1">
<p> 游客</p><p>
标题:webpack配置.jsx文件由babel来解析，出现：babel没能识别我 js 文件中的 jsx 语法?<br/>
正文:<br/>
fb 开发网上例子 getting  started用的是 &amp;lt;script type=&amp;quot;text/babel&amp;quot;&amp;gt;      // To get started with this tutorial running your own code, simply remove      // the script tag loading scripts/example.js and start writing code here.    &amp;lt;/script&amp;gt;  而一般我们会看到用的是jsx  有什么区别吗区别就在于 babel 支持将按照ES6写的代码转成ES5格式的代码，以便让其能在现代浏览器上正常运行，用jsx， 只能用ES5的语法。升级到 babel6 了安装 babel-preset-react npm install babel-preset-react --save-dev 配置//entry 是页面中的入口文件//output: 是指页面通过webpack打包后生成的目标文件放在什么地方去，我这边是在根目录下生成build文件夹，该文件夹内有一个build.js文件；//resolve: 定义了解析模块路径时的配置，常用的就是extensions; 可以用来指定模块的后缀，这样在引入模块时就不需要写后缀，会自动补全。//plugins: 定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取公用的部分，生成common.js;//module.loaders：是文件的加载器;module: {    loaders: [      { test: /\.css$/, loader: 'style!css' },//.css 文件使用 style-loader 和 css-loader 来处理      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},//将样式中引用到的图片转为模块来处理; 配置信息的参数&amp;ldquo;?limit=8192&amp;rdquo;表示将所有小于8kb的图片都转为bas<br/><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=2246&amp;Page=1">[&lt;&lt;]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=2246&amp;Page=1">[[1]]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=2246&amp;Page=2">[2]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=2246&amp;Page=2">[&gt;&gt;]</a><br/>
<br/>
<a href="wap.asp?act=Com&amp;id=2246">查看评论(0)</a><br/>
<a href="wap.asp?act=AddCom&amp;inpId=2246">发表评论</a><br/><br/>

<br/>

<br/>
<a href="http://camnpr.com/wap.asp">首页</a>
</p>
</card>
</wml>