Webpack创建React项目

最新推荐文章于 2024-05-16 23:14:17 发布

今天也想MK代码

最新推荐文章于 2024-05-16 23:14:17 发布

阅读量212

点赞数

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

本文链接：https://blog.csdn.net/weixin_42429220/article/details/107891253

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、安装Webpack

1. 创建空文件夹

 mkdir  webpackCreateReact

用vscode 、idea或其他开发软件打开 webpackCreateReact文件夹

2. 加载 package.json

npm init -y

3.安装webpack

npm install -D webpack webpack-cli
npm install webpack-merge -D

二、初始化项目目录

1、创建 src 文件夹，存放组件，js，css 等文件

2、创建 build文件夹，存放打包需要的js文件

3、创建 public文件夹，存放打包需要的html文件

代码结构如下：

三、初始化项目文件

1、安装react 组件

npm i react react-dom -S

2、创建index.html文件在public中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My React Boilerplate</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

3、创建App.js文件在src中

import React from 'react';

import './App.css'
class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
               hello react
            </div>
        );
    }
}
export default App;

4、创建index.js文件在src中

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import '@alifd/theme-1212/dist/next.css';
ReactDOM.render(
    <App/>,
    document.getElementById('app')
);

5、安装处理 Babel

npm i babel-cli babel-core babel-preset-env babel-preset-react babel-preset-stage-2--save-dev

在根目录创建.babelrc 配置文件

{
    "presets": ["env", "react", "stage-2"]
}

6、处理jsx、js、css、sass

安装

npm i babel-loader --save-dev

npm i node-sass sass-loader style-loader css-loader --save-dev

7、处理html

安装

npm i html-webpack-plugin --save-dev

npm i clean-webpack-plugin --save-dev

npm i webpack-cli webpack-dev-server --save-dev

8、在build创建打包配置文件

webpack.base.js
webpack.dev.js
webpack.prod.js

9、配置package.json 打包命令

源码

最后

推荐一款react ui库。fusion UI设计与前端开发人员共同操作ui。

如有出现 …moment… 错误，尝试如下：

npm install --save moment react-moment

今天也想MK代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Webpack创建React项目

一、安装Webpack1. 创建空文件夹 mkdir webpackCreateReact用vscode 、idea或其他开发软件打开 webpackCreateReact文件夹2. 加载 package.jsonnpm init -y3.安装webpacknpm install -D webpack webpack-clinpm install webpack-merge -D二、初始化项目目录1、创建 src 文件夹，存放组件，js，css 等文件2、创建 build文件
复制链接

扫一扫