React+Webpack构建环境

悠悠 2022-06-10 04:17 266阅读 0赞

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

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

#### **环境搭建** ####

##### **环境相关** #####

*  系统：macOS
 *  开发工具：webstorm

##### **开始搭建** #####

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

node --version

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

*  新建一个项目，我是用的是webstorm，项目列表如下图。  
    ![这里写图片描述][SouthEast 1]
 *  安装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');

好了，到这里所有的代码就都OK了。

##### **项目启动** #####

*  这里安利一个简单的方法，不用每次启动项目都用命令启动。  
    第一步，在webstorm上方找到如下：

![这里写图片描述][SouthEast 2]  
第二步：

![这里写图片描述][SouthEast 3]  
第三步：

![这里写图片描述][SouthEast 4]

ok，这样子每次启动先点build，然后点start，就可以正常启动了。  
点击build显示如下界面：  
![这里写图片描述][SouthEast 5]  
点击start显示如下界面：  
![这里写图片描述][SouthEast 6]

在浏览器输入如：[http://localhost:3001/][http_localhost_3001]

项目启动成功！  
![这里写图片描述][SouthEast 7]

[http_nodejs.org_en]: http://nodejs.org/en/
[http_nodejs.cn]: http://nodejs.cn
[SouthEast]: /images/20220610/e875172b65cf4eafb95d524038e337ad.png
[SouthEast 1]: /images/20220610/6b2a6ba189f34c84bfbef83244ac44ab.png
[SouthEast 2]: /images/20220610/18782304ce59458890ba8c2f2671d365.png
[SouthEast 3]: /images/20220610/b1f3cca882814b91839439ba52c54541.png
[SouthEast 4]: /images/20220610/1a5e8d71fdad41a0adb009352190baf7.png
[SouthEast 5]: /images/20220610/acf2b689cbfb47d0bef5e26ad05a3022.png
[SouthEast 6]: /images/20220610/e8a2f45fb6b34f5eb62cf53a6bdfdcb3.png
[http_localhost_3001]: http://localhost:3001/
[SouthEast 7]: /images/20220610/d245f0dd77ee431da8ab52069c0a557d.png