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

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中的语法会报错）

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

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

image.png

step3: Hello World

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

   image.png

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

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

   

   image.png

3. 配置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的语法

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

   

   image.png

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

   

   image.png

大功告成。