## 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']
}
}
}
]
}
}
~~~
