React+webpack搭建前端开发环境

1.安装node.js

2.创建自己的工程文件夹

 本文主要创建一个项目文件夹：D:\Users\hangfengzhang\WebWorkSpace

3.npm init初始化

在node.js command 上输入 npm init 进行初始化，则在WebWorkSpace会出现package.json文件。

在packagre.json中添加：

"scripts": {
    "start": "webpack"

  },

4.安装webpack

输入命令：npm install --save-dev webpack

即安装了webpack

5.安装react相关组件

npm install --save react react-dom

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

分别输入以上指令进行安装

6.创建文件index.js index.html webpack.config.js

index.html

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
  ReactDOM.render(
    
我的第一个react例子
,
    document.getElementById('root')
  );

webpack.config.js

const path =require('path');
module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test:  /\.js$/, 
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["es2015","react"] 
        }
      }
    ]
  }
};

7.运行

在工程文件位置下命令窗口输入npm start，命令窗口运行结果：

点击index.html文件可以得到如下图所示：