React+Webpack构建环境_react+ webpack build 构建-优快云博客

本文链接：https://blog.youkuaiyun.com/wangchengming1/article/details/77017867

本文介绍如何使用React和Webpack搭建前端项目环境，包括安装Node.js、配置Webpack及Babel等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先简单介绍一下React和Webpack这两个东东。

React是一个Facebook和Instagram用来创建用户界面的JavaScript库,是现在最热门的前端框架。
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

环境搭建

环境相关

系统：macOS
开发工具：webstorm

开始搭建

首先要安装nodeJS。官网下载地址：http://nodejs.org/en/，nodeJS中文网：http://nodejs.cn。建议安装最新版6.0系列版本，安装完之后，在iTerm上输入如下命令：

node --version

如果出现如下界面就算nodeJS安装成功了。
这里写图片描述

新建一个项目，我是用的是webstorm，项目列表如下图。
安装Webpack，直接在webstorm的Terminal里输入如下命令：

npm install webpack --save-dev

使用npm init生成默认版packag.json，输入如下命令：

npm init -yes

安装React相关的包，输入如下命令（执行完毕后会自动添加至package.json里）

npm react react-dom react-router redux react-redux redux-thunk --save

安装babel插件，babel插件是webpack需要的加载器。输入如下命令：

npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev

新建.bablerc文件，添加内容如下：

{
  "presets": ["es2015", "react"]
}

新建webpack.config.js文件，内容如下：

/**
 * Created on 17/8/6.
 * author: cm_wang
 */

var path = require('path');
var webpack = require('webpack');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports= {
  entry: ['whatwg-fetch', 'babel-polyfill', path.resolve(APP_PATH, 'app.js')],
  output: {
    path: BUILD_PATH,
    filename: 'wechat.js'
  },
  //enable dev source map
  devtool: 'eval-source-map',
  //enable dev server
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  },
  resolve: {
    extensions: ['.js']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: APP_PATH,
        query: {
          presets: ['es2015', 'react'],
        }
      },
      { test: /\.css$/ },
      { test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loader: 'url-loader?limit=100000' },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }
    ]
  }
};

entry指的是文件的打包入口，output指的是打包结果，path指的是输出的文件夹，filename指的是打包结果文件的名称。

在package.json里添加如下代码：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --progress --colors --watch",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
    "start": "node server.js"
  },

最终生成的package.json文件内容如下：

{
  "name": "wechat-app",
  "version": "1.0.0",
  "description": "wechat-app",
  "main": "index.js",
  "author": "cm_wang",
  "license": "ISC",
  "keywords": [
    "wechat",
    "react"
  ],
  "repository": {
    "type": "",
    "url": ""
  },
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --progress --colors --watch",
  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
  "start": "node server.js"
},
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.2",
    "redux": "^3.7.2",
    "redux-router": "^2.1.2",
    "redux-saga": "^0.15.6",
    "redux-thunk": "^2.2.0",
    "webpack": "^3.4.1",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "jsx-loader": "^0.13.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

编写代码

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1"/>
    <meta name=apple-mobile-web-app-capable content=yes>
    <title>weChat</title>
</head>
<body>
<div id="react-application">
</div>
<script src="./wechat.js?1"></script>
</body>

Title.react.js

import React from 'react';

class Title extends React.Component{
  render(){
    return <h1>Hello React!</h1>
  }
}

Title.displayName = 'Title';

export default Title;

app.js

import React from 'react';
import {render} from 'react-dom';
import Title from './js/components/Title.react';

render(
  (
    <div>
      <Title/>
    </div>
  ),
  document.getElementById('react-application')
);

server.js，用来监听

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/build'));

app.get('/', function(req, res){
  res.render('index.html');
});

app.listen(3001);
console.log('Listening on port 3001');