脚本宝典收集整理的这篇文章主要介绍了Webpack + React学习笔记(一) —— 准备，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1. npm install --save react 安装react。

2. npm install --save react-dom 安装react-dom。

3. npm install -g webpack 全局安装webpack。

4. npm install --save-dev webpack 安装webpack到项目。

5. npm install --save-dev babel-core babel-loader babel-PReset-es2015 babel-preset-react babel-preset-stage-0 安装babel相关的包。（必需， 否则react中的语法会报错）

@H_406_64@

--save和--save-dev的区别：
--save： 项目上线运行仍然要用到的东西，比如react， 上线后仍然需要。
--save-dev： 仅开发阶段所需要，比如webpack， 仅开发的阶段需要，项目上线之后并不需要。

安装成功后package.json中的内容如下，注意dePEndencies和devDependencies对应的就是--save和--save-dev




steP3: Hello World

1. touch index.html 创建入口html文件，写入内容如下：



mv index.html ./public/把index.html移动到public文件夹下

2.touch index.js 创建入口js文件 ，写入




3.配置webpack:
touch webpack.config.js创建webpack的配置文件。配置文件中写入如下：




这些都是webpack的配置，关于webpack的教程很多，推荐一篇入门Webpack，看这篇就够了。如果嫌太长不想看，那我就着上面这个图把图里的配置讲一下吧。

entry: __dirname + '/index.js'： 入口文件(__dirname指的是当前项目的根目录)。
output.path: 把文件打包到哪。
output.filename: 打包后文件叫啥。
loaders中的test, loader, exclude： 分别表示对于怎样的文件，用什么loader来处理， 除开哪些文件。图中的loader的意思是，对于node_modules以外的后缀名为js或者jsx的文件， 用babel-loader来处理。
至于为什么是后缀名为js或者jsx，这里是个正则，x后面跟的问号表示x出现0次或者1次。$表示结尾。图示如下：




4.配置.babelrc:
touch .babelrc: 创建babel的配置文件。在文件中写入：




在上面的3中，我们用babel-loader来处理后缀名为js或者jsx的文件，但是没有指明按照怎样的转码规则来处理这些文件，所以这里的presets指明的就是转码规则。

es2015: 用来编译es6语法
stage-0: 用来编译一些es7语法（还没定下来）
react: 用来编译react的语法

5.命令行里输入webpack，开始打包，得到：




6.在浏览器中打开index.html




大功告成。

脚本宝典总结

以上是脚本宝典为你收集整理的Webpack + React学习笔记(一) —— 准备全部内容，希望文章能够帮你解决Webpack + React学习笔记(一) —— 准备所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。