一、初始化項目
- 新建文件夾，文件名firstreact 文件夾名稱不要用react，node這類關鍵字，後面使用插件時會發生錯誤。
-
init項目環境，項目信息可默認或自行修改
mkdir firstreact cd firstreact npm init
二、安裝webpack
- 新建gitignore文件，用於忽略安裝的包文件，文件內容: node_modules
-
安裝webpack， 注意：我此處安裝的webpack版本是4.28.4，webpack4和webpack2, webpack3的一些配置不同，具體參考webpack文檔webpack中文文檔
npm i --save-dev webpack
三、配置webpack環境
- 新建文件夾，文件名：src
-
src目錄下新建文件hello.js,文件內容：
module.exports = function () { var element = document.createElement('h1'); element.innerHTML = 'Hello React'; return element; }; -
src目錄下新建文件index.js，文件內容：
var hello = require('./hello.js'); document.body.appendChild(hello()); -
新建文件webpack.config.js，一個最基礎的webpack配置如下：
const webpack = require('webpack'); const path = require('path'); var config = { entry: [ './src/index.js' ], // 打包入口文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } // 打包輸出文件 }; module.exports = config; -
執行webpack。執行完成後，根目錄下會新增一個dist文件夾，文件夾下是打包出來的js文件bundle.js
webpack -
安裝html-webpack-plugin，該插件將爲你生成一個 HTML5 文件， 其中包括使用 script 標籤的 body 中的所有 webpack 包。
npm i --save-dev html-webpack-plugin -
html-webpack-plugin配置，webpack.config.js內容如下
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin'); var config = { entry: [ './src/index.js' ], // 打包入口文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },// 打包輸出文件 plugins: [ new HtmlwebpackPlugin({ title: 'Hello React', }) ] }; module.exports = config; -
再次執行webpack，此時dist目錄下生成了一個新文件index.html
webpack -
安裝webpack-dev-server和webpack-cli，提供一個簡單的 web 服務器，並且能夠實時重新加載。
npm install --save-dev webpack-dev-server webpack-cli -
修改webpack.config
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin'); var config = { entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:3000', './src/index.js' ], // 入口文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, // 打包輸出文件 plugins: [ new HtmlwebpackPlugin({ title: 'Hello React' }), ] }; module.exports = config; -
配置webpack啓動的快方式，此處webpack4在啓動服務是要求設置mode，告知 webpack 使用相應模式的內置優化。未設置會報一個警告。mode選項支持“development”“production”“none”，具體信息請閱文檔 修改package.json文件：
············ "scripts": { "start": "webpack-dev-server --mode=development --port 3000 --hot", "build": "webpack --mode=production" } ··········· -
啓動服務，服務啓動後打開瀏覽器訪問http://localhost:3000/
npm run dev
三、優化開發環境
-
css編譯和js編譯。現在開發時一般css都會使用擴展css語法，如less或sass，這時就需要在項目中安裝css編譯插件。此處以less爲例。es6和es7語法也需要babel編譯。
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin'); var config = { entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:3000', './src/index.js' ], // 入口文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, // 打包輸出文件 module: { rules: [ { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' } ] }, { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader' } ] } ] }, plugins: [ new HtmlwebpackPlugin({ title: 'Hello React' }), ] -
安裝：
npm i --save-dev less css-loader style-loader less-loader npm i --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react修改webpack.config.js
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin'); var config = { entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:3000', './src/index.js' ], // 入口文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, // 打包輸出文件 module: { rules: [ { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' } ] }, { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader' } ] } ] }, plugins: [ new HtmlwebpackPlugin({ title: 'Hello React' }), ] }; module.exports = config; -
根目錄下新建.babelrc文件，配置文件內容如下
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] } -
在src目錄下新建文件index.less，文件內容如下
body{ h1{ color: green; } } -
修改src目錄下的index.js文件：
import hello from './hello.js'; import './index.less'; document.body.appendChild(hello()); -
再次啓動服務
npm run start
目前爲止完成了一個最基礎的項目結構，後面需要使用其他框架的話再此基礎上修改。在這過程中因各個插件工具的版本不同可能會發生不同錯誤，遇到錯誤時，請查詢相關文檔。
四、在項目中使用React
-
安裝react。
npm i --save-dev react react-dom -
修改src目錄下index.js，文件內容如下：
import React from 'react'; import ReactDOM from 'react-dom'; import './index.less'; class APP extends React.Component { render() { return (<h1>Hello React</h1>) } } ReactDOM.render(<APP/>, document.getElementById('content')); -
在src目錄下新建index.html，在html增加掛載節點content。 文件內容如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="content"></div> </body> </html>- 對應修改webpack.config.js文件，爲htmlWebpackPlugin修改template
············ plugins: [ new HtmlwebpackPlugin({ title: 'Hello React', template: './src/index.html' }), ] ············
目錄結構爲：
│ .babelrc
│ .gitignore
│ package.json
│ webpack.config.js
│
└─src
hello.js
index.html
index.js
index.less