width:100%">
为了楼主，我拼了，楼下的抱紧大腿。。。
width:100%">
12345678910
Comsenz Inc. Design: Dean. DiscuzFans.webpack打包调试react并使用babel编译jsx配置方法 - 学习备忘 - ITeye技术网站
博客分类：
安装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'),
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"&
&meta charset="UTF-8"&
&title&tests&/title&
&div id="react-content"&&/div&
&script src="./bundle.js"&&/script&
在浏览器中打开
就可以实时查看效果，修改后代码后，需要刷新才能查看到效果。执行npm run build可以打包，相当于执行webpack命令
Cannot GET / 错误
是由于package.json中的
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
build文件夹不存在
配置react和babel
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中增加相应配置
loaders: [
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
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编译器
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
浏览: 20537 次
来自: 上海
测试了一下，问题还是不小的啊，如果失去浏览器窗口失去焦点，甚至 ...}