React+webpack搭建前端开发环境

最新推荐文章于 2024-04-17 16:06:06 发布

carson0408

最新推荐文章于 2024-04-17 16:06:06 发布

阅读量455

点赞数 1

分类专栏：前端文章标签： react webpack

本文链接：https://blog.csdn.net/carson0408/article/details/80897262

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8" />
    <title>example</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="dist/bundle.js"></script>
  </body>

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
  ReactDOM.render(
    <h1>我的第一个react例子</h1>,
    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文件可以得到如下图所示：

carson0408

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React+webpack搭建前端开发环境

1.安装node.js2.创建自己的工程文件夹本文主要创建一个项目文件夹：D:\Users\hangfengzhang\WebWorkSpace3.npm init初始化在node.js command 上输入 npm init 进行初始化，则在WebWorkSpace会出现package.json文件。在packagre.json中添加："scripts": { "start": "we...
复制链接

扫一扫