自定义创建一个webpack、babel、react项目

最新推荐文章于 2023-04-06 20:04:28 发布

Wing_ever

最新推荐文章于 2023-04-06 20:04:28 发布

阅读量166

点赞数

分类专栏： React 文章标签： react webpack babel

本文链接：https://blog.csdn.net/Wing_ever/article/details/97235291

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自定义创建一个webpack、babel、react项目

初学react是在不是很懂到底什么情况下该怎么创建一个react项目，特别是后面又涉及到webpack打包的问题，需要引入哪些包，是否有依赖关系，先后顺序有没有要求，参考了很多博客，自己写了一个自己觉得算是合适的，记录一下：
主要参考博客地址：很详细，时间比较新

创建一个react项目文件夹

mkdir projectname
创建一个存放react源代码的src文件夹

mkdir src
初始化项目

npm init -y

完成上面步骤后，项目文件夹下游一个src文件夹和一个package.json文件

安装webpack

npm install webpack webpack-cli --save-dev
安装babel

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
在项目文件夹根目录下创建’.babelrc’文件并进行如下配置

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
在src文件夹下创建index.html、main.js、App.js等三个文件
index中存放模板文件，app中为组建，main是打包入口，用于组件渲染
安装html处理组件

npm install html-webpack-plugin html-loader --save-dev

在项目文件夹下创建’webpack.config.js’文件并进行配置

  const path = require('path');

  const HtmlWebPackPlugin = require("html-webpack-plugin");

  module.exports = {

  entry: './src/main.js',

  output: {

      filename: 'bundle.js',

      path: path.resolve(__dirname, 'dist')

  },

  module: {

      rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
          loader: 'babel-loader'
          }
      },
      {
          test: /\.html$/,
          use: {
          loader: 'html-loader'
          }
      }
      ]
  },

  plugins: [
      new HtmlWebPackPlugin({

      titel: 'react app',
      filename: 'index.html',
      template: './src/index.html'
      })
  ]
  };
  `

安装react和react-dom

npm install react react-dom --save
安装webpack-dev-server启动本地服务器，实现保存自动刷新

npm install webpack-dev-server --save-dev
在package.json中添加上面那句脚本

"scripts": { "start": "webpack-dev-server --open --mode development" }
运行项目

npm run start

index.html

<!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>React</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

app.js

import React from 'react'

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>Hello World</h1>
      </div>
    )
  }
}

export  default App

main.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'

ReactDOM.render(<App/>, document.getElementById('app'))

Wing_ever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义创建一个webpack、babel、react项目

自定义创建一个webpack、babel、react项目创建一个react项目文件夹mkdir projectname创建一个存放react源代码的src文件夹mkdir src初始化项目npm init -y完成上面步骤后，项目文件夹下游一个src文件夹和一个package.json文件安装webpacknpm install webpac...
复制链接

扫一扫