Webpack + React学习笔记(一) —— 准备

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

前言

这篇文章用来记录从无到有的Webpack + React的学习笔记。

开始

一开始什么都没有。

step1:初始化项目

1.mkdir react-what-i-like 创建一个空的文件夹。
2.cd react-what-i-like 切换到该文件夹。
3.npm init 初始化该项目 -> 一路回车,可以看到生成了package.json。

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中的内容如下,注意dependenciesdevDependencies对应的就是--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

大功告成。

原文链接:https://www.f2er.com/react/302320.html

猜你在找的React相关文章