從零搭建react專案

1，新建乙個空白資料夾（本文的資料夾boke），cd到該目錄，開始初始化，這裡用yarn

yarn init 或者 npm init -y

一路enter之後會生成乙個package.json檔案，內容如下：

, "keywords": , "author": "", "license": "isc"

}

2，安裝webpack，為了避免出現不可知的bug，需要安裝指定版本

yarn add [email protected] --dev

const path = require('path');
module.exports = 
}

此時在根目錄下執行node_modules/.bin/webpack，根目錄將生成dist目錄。為了方便編譯，將node_modules/.bin/webpack命令新增到scripts中，新增如圖所示的**，之後執行yarn run dev或者npm run dev即可

3，安裝解析jsx的bable-loader,進入webpack官網，搜bable-loader按照文件配置即可，首先安裝[email protected]，然後在webpack.config.js中配置解析規則，

module: 
}}	]
}

上述安裝命令依次是：

yarn add [email protected] --dev
yarn add [email protected] --dev
yarn add [email protected] --dev

4，安裝解析css和scss的css-loader和sass-loader，安裝命令是：

yarn add [email protected] [email protected] --dev

此時，webpack.config.js中配置為：

const path = require('path');
const extracttextplugin = require('extract-text-webpack-plugin');
module.exports = ,
module: }},
)}]	}，
plugins: [
new extracttextplugin("[name].css")
]}

在src目錄分別新建index.css和index1.scss，並在其中寫入一些樣式結構，在inde.js中將其引入，然後測試。會發現依然是報錯，因為在配置是還引入了extract-text-webpack-plugin和style-loader，故需要安裝extract-text-webpack-plugin和style-loader

yarn add [email protected] --dev
yarn add [email protected] --dev

安裝配置上述檔案後執行index1.scss還是會報錯，因為解析sass檔案還需要node-sass，安裝[email protected]，

yarn add [email protected] --dev

5，引入react，安裝react和react-dom：

yarn add [email protected] [email protected] -s

安裝[email protected]，安裝命令為：

yarn add [email protected] --dev

在src目錄下新建乙個index.html檔案，寫入如下內容：

在webpack配置檔案中配置htmlwebpackplugin：

new htmlwebpackplugin()

import react from 'react';
import reactdom from 'react-dom';
render() 
}

yarn add [email protected] --dev

在配置檔案中寫入：

}]},
}]}]
}

7，配置提出公共模組的配置，只需在webpack.config.js加入如下**：

new webpack.optimize.commonschunkplugin()

並引入webpack，const webpack = require('webpack');

8，由於每次更改**後都需要手動執行yarn run dev，這不但麻煩，而且效率也很低，為此，引入[email protected]，使每次更改**後讓其自動更新。首先安裝webpack-dev-server：

yarn add [email protected] --dev

安裝後在webpack.config.js中配置：

devserver: 
}

想要啟動webpack-dev-server，需要將package.json檔案修改如下：

到此配置基本結束，最終目錄為：

webpack.config.js檔案為：

const path = require('path');
const extracttextplugin = require('extract-text-webpack-plugin');
const htmlwebpackplugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = ,
module: }},
)},]	},
devserver: 
},plugins: [
new htmlwebpackplugin(),
new extracttextplugin('css/[name].css'),
new webpack.optimize.commonschunkplugin()
]}

從零搭建react專案

vue 從零搭建專案

從零搭建React Native專案

從零搭建pwa專案

從零搭建react專案

vue 從零搭建專案

從零搭建React Native專案

從零搭建pwa專案

相關推薦