安裝
首先，你需要點擊安裝 nodejs（npm）。然后執行：
建立一個目錄作為項目根目錄并初始化：
mkdir react-webpack
cd react-webpack/
npm init
安裝相關組件
這里包括了本文所需要的全部組件
npm i --save-dev react react-dom react-transform-hmr webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015 babel-plugin-react-transform css-loader style-loader less less-loader react-transform-catch-errors redbox-react --registry=https://registry.npm.taobao.org
下面簡單說明上述組件功能
- react: react基礎組件
- react-dom: react 操作 DOM 組件
- react-transform-hmr: hot module reloading 為熱替換依賴插件
- webpack: webpack 基礎組件
- webpack-dev-server: webpack 服務器組件
- babel-core: babel 核心組件
- babel-loader: 轉碼工具
- babel-preset-react: 支持 react 轉碼
- babel-preset-es2015: 支持 ES6 轉碼
- babel-plugin-react-transform: 實現 babel 熱替換
- css-loader: 對 css 文件進行打包
- style-loader: 將樣式添加進 DOM 中
- less: less 語法支持
- less-loader: 對 less 文件進行打包
- react-transform-catch-errors: 將錯誤顯示在瀏覽器中
- redbox-react: 渲染插件，配合上一個使用顯示錯誤
hello world
建立如下目錄結構(圖中不包括 node_modules 目錄，實際項目中必須保留，下同)
其中 webpack.config.js 內容如下
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval-source-map', //開啟 soursemap
entry: path.resolve(__dirname, './src/index.js'), //指定入口
output: { //設置輸出路徑
path: path.resolve(__dirname, './build'),
filename: "index.js"
},
module: { //設置 babel 模塊
loaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
},
plugins: [ //加載插件
new webpack.HotModuleReplacementPlugin() //熱模塊替換插件
]
};
其中 .babelrc 內容如下：
{
"presets": [
"react",
"es2015"
]
}
其中 src/index.js 內容如下：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root')
);
其中 build/index.html 內容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>demo</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="index.js"></script>
</html>
修改 package.json 中的 scripts 部分如下：
"scripts": {
"build": "webpack"
}
而后運行 'npm run build' 運行在本地 './build/index.html' 看到渲染的頁面
服務器環境配置
修改或添加 webpack.config.js 中以下部分：
entry: ['webpack/hot/dev-server', path.resolve(__dirname, './src/index.js')], //指定入口
devServer: { //配置本地服務器
contentBase: './build',
colors: true,
historyApiFallback: true,
inline: false,
port: 4444,
process: true
}
修改 package.json 中的 scripts 部分如下：
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
}
而后運行 'npm run dev' 運行在本地 'http://localhost:4444/' 看到渲染的頁面
## 配置 css 和 less
在 ./src/ 中添加 index.less 和 font.css，分別寫入以下內容測試功能
```css
/* index.less */
h1 {
background-color: red;
}
/* font.css */
h1 {
color: yellow;
}
修改 webpack.config.js 部分：
module: { //設置 babel 模塊
loaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},{
test: /\.css$/,
loader: 'style-loader!css-loader'
},{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}]
}
修改 src/index.js 如下：
import React from 'react';
import ReactDOM from 'react-dom';
import './font.css';
import './index.less';
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root')
);
然后重啟運行(由于修改了 webpack.config.js，不能使用熱替換)頁面可以看到相關樣式
