Webpack + React学习笔记(一) —— 准备
前言
这篇文章用来记录从无到有的Webpack + React的学习笔记。
开始
一开始什么都没有。
step1：初始化项目
1.mkdir react-what-i-like 创建一个空的文件夹。
2.cd react-what-i-like 切换到该文件夹。
3.npm init 初始化该项目 -> 一路回车，可以看到生成了package.json。
image.png
4.mkdir public:创建public文件夹用来放打包后的文件以及index.html文件
step2: 安装react和webpack
-
npm install --save react安装react。 -
npm install --save react-dom安装react-dom。 -
npm install -g webpack全局安装webpack。 -
npm install --save-dev webpack安装webpack到项目。 -
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0安装babel相关的包。（必需， 否则react中的语法会报错）
--save和--save-dev的区别：
--save： 项目上线运行仍然要用到的东西，比如react， 上线后仍然需要。
--save-dev： 仅开发阶段所需要，比如webpack， 仅开发的阶段需要，项目上线之后并不需要。
安装成功后package.json中的内容如下，注意dependencies和devDependencies对应的就是--save和--save-dev
image.png
step3: Hello World
-
touch index.html创建入口html文件，写入内容如下：
image.png
mv index.html ./public/ 把index.html移动到public文件夹下。
-
touch index.js创建入口js文件 ，写入
image.png
-
配置webpack:
touch webpack.config.js创建webpack的配置文件。配置文件中写入如下：
image.png
这些都是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次。$表示结尾。图示如下：
image.png
4.配置.babelrc:
touch .babelrc: 创建babel的配置文件。在文件中写入：
image.png
在上面的3中，我们用babel-loader来处理后缀名为js或者jsx的文件，但是没有指明按照怎样的转码规则来处理这些文件，所以这里的presets指明的就是转码规则。
es2015: 用来编译es6语法
stage-0: 用来编译一些es7语法（还没定下来）
react: 用来编译react的语法
-
命令行里输入
webpack，开始打包，得到：
image.png
-
在浏览器中打开
index.html
image.png
大功告成。
