webpack配置.jsx文件由babel来解析,出现:babel没能识别我 js 文件中的 jsx 语法?
分类:Javascript| 发布:佚名| 查看:2109 | 发表时间:2016/2/17
fb 开发网上例子 getting started用的是
1 | < script type = "text/babel" > |
2 | // To get started with this tutorial running your own code, simply remove |
3 | // the script tag loading scripts/example.js and start writing code here. |
而一般我们会看到用的是jsx 有什么区别吗
区别就在于 babel 支持将按照ES6写的代码转成ES5格式的代码,以便让其能在现代浏览器上正常运行,用jsx, 只能用ES5的语法。
升级到 babel6 了
安装 babel-preset-react
1 | npm install babel-preset-react --save-dev |
配置
//entry 是页面中的入口文件
//output: 是指页面通过webpack打包后生成的目标文件放在什么地方去,我这边是在根目录下生成build文件夹,该文件夹内有一个build.js文件;
//resolve: 定义了解析模块路径时的配置,常用的就是extensions; 可以用来指定模块的后缀,这样在引入模块时就不需要写后缀,会自动补全。
//plugins: 定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取公用的部分,生成common.js;
//module.loaders:是文件的加载器;
3 | { test: /\.css$/, loader: 'style!css' }, |
4 | { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, |
5 | { test: /\.jsx?$/, loaders: [ 'react-hot' , 'babel' ], |
7 | presets: [ 'es2015' , 'react' ] |
8 | }, include: path.join(__dirname, 'src' ) } |