## 1.使用官网提供的脚手架工具创建项目(推荐使用)
1.创建
~~~
// 全局安装create-react-app
npm install create-react-app
// 创建名为‘app-name’的react项目
create-react-app app-name
~~~
2.配置文件展开
~~~
// 进入刚创建的react项目
cd app-name
// 默认情况下 'create-react-app'将'webpack'的所有配置文件全部隐藏，执行该命令会打开所有的配置文件
npm run eject
~~~
3.配置`@`重定向符号，将src/目录重定向为`@`符号，如此在导入src下目录的文件时就可以使用`@/`代替`../../src/`
在步骤2之后创建的config中展开到 `/config/webpack.config.dev.js`和`/config/webpack.config.prod.js` 文件，分别找到 `'react-native': 'react-native-web'` ，在这一行的下面加入
~~~
'@': path.join(\_\_dirname, '..', 'src'),
~~~
`tips: webpack.config.dev.js 是用于开发环境的配置文件, webpack.config.prod.js 是用于生产环境的配置。`
## 2.使用webpack创建项目
1.创建身份证明 `package.json`
~~~
npm init
~~~
2.安装`webpack `与 `react` 、`react-dom`
~~~
cnpm install webpack --save-dev
cnpm install react reac-dom --save
~~~
关于`npm install --save-dev` 和 `npm install --save`的区别
| | npm install --save-dev | npm install --save |
| --- | --- |--- |
| package.json中模块名和版本号的位置 | 在devDependencies下 | 在dependencies下 |
| 是否可作用于生产环境（production） | 否 | 是 |
3.安装 `babel-core` 、`babel-loader`、`babel-preset-es2015`、`babel-preset-react`
* **babel-loader**: babel加载器
* **babel-preset-es2015**: 支持es2015
* **babel-preset-react**: jsx 转换成js
~~~
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
~~~
3.配置webpack.config.js
可以参照官方文档：[链接](https://webpack.js.org/configuration)
## 3.如果在方法2中创建的项目出现问题（例如：webpack打包指令一直报错），请直接使用方法三
1、创建`package.json`文件，将配置改为下面的代码，注意`name`可以更改
~~~
{
"name": "01helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}
~~~
这一套配置可放心使用，本人亲测成功！
3、`cnpm install` 安装所有依赖
4、配置`webpack.config.js`
可以参照官方文档：[链接](https://webpack.js.org/configuration)
自己配的一套
~~~
const path = require('path');
module.exports = {
mode: "production",
entry: "./app/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015','react']
}
}
}
]
}
}
~~~
