React + webpack 快速搭建开发环境

来源：互联网发布：跨越百年的美丽知乎编辑：程序博客网时间：2024/05/19 17:23

转自：https://www.cnblogs.com/marymei0107/p/6118524.html 最后需要 npm install 一下

因网上大多React + webpack快速搭建的运行不起来，便自行写了一个。在搭建开发环境的前需安装nodejs，npm。

新建一个工作目录，比如叫reactdome，在reactdome目录中运行命令npm init；这里可以全部按enter执行，直到执行完毕，执行完毕后将会自动生成package.json文件。在package.json文件中配置如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "css-loader": "^0.25.0",
    "react": "^15.3.2",
    "react-css-modules": "^4.0.3",
    "react-dom": "^15.4.0",
    "react-router": "^3.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

里面的文件都是必须的，后期需要其他的可自行添加安装更多。

package.json文件配置完毕，执行npm install命令即可（我有FQ，如果安装有问题可自行百度找阿里镜像安装npm）。

在reactdome文件夹中新建webpack.config.js文件，里面配置对应代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var path = require('path');
var webpack = require('webpack');
 
module.exports = {
    entry: [
        'webpack/hot/dev-server',
        path.resolve(__dirname, './app/index.js')
    ],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js',
    },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {presets: ['es2015', 'react'] }
      }
    ]
  },
  resolve: {
    extensions: ['','.js', '.jsx'],
  }
};

在reactdome文件里面新建一个index.htm文件，文件代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>reactdome</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="bundle.js"></script>
  </body>
</html>

在reactdome文件里面新建一个app文件夹，app文件夹中新建一个index.js的文件，代码如下：

1
2
3
4
5
6
7
import React from 'react';
import ReactDOM from 'react-dom';
 
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('content')
);

文件代码目录如下：

全部执行配置完毕之后，运行命令：npm run dev，打开浏览器输入http://localhost:8080/就可以运行你的代码了。

配置的过程中可能因为版本等问题不能正常执行，可回退到对应的稳定版本。good luck~

阅读全文

0 0