用Webpack搭建一个React项目

最新推荐文章于 2024-04-27 05:10:32 发布

ZeHome吖

最新推荐文章于 2024-04-27 05:10:32 发布

阅读量203

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_43240744/article/details/118094607

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用Webpack搭建一个React项目

先搭建一个简单的项目

先搭建一个简单的项目

初始化

cmd输入npm init，设置相关信息初始化项目。
在这里插入图片描述

安装所需的依赖

在这里插入图片描述

新建文件webpack.config.js配置出入口以及module

const path = require('path')
module.exports = {
    entry: '/src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: ['babel-loader'],
            include: path.resolve(__dirname, 'src')
        }]
    }
}

在对应的目录下新建一个index.js作为入口文件并编辑以下代码作为示范
在这里插入图片描述

//index.js代码
document.getElementById('main').innerText = 'my react'

打包并引入

在终端执行webpack命令，或在package.json配置命令并执行进行打包
打包成功后对应目录下会生成打包后的文件，在html文件内引入打包生成的bundle.js进行验证
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main"></div>
</body>
<script src="../dist/bundle.js"></script>
</html>

运行发现引入成功了，这时候一个由webpack搭建的简单项目已经成功了
在这里插入图片描述

开始引入react

安装react，react-dom
在这里插入图片描述
编写react

import React from 'react'
import ReactDom from 'react-dom'
ReactDom.render(
    <div>Hi React</div>,document.getElementById('main')
)

执行webpack打包，编译报错
在这里插入图片描述
这里无法识别react代码，还需要配置babel，分别安装@babel/preset-react，babel-plugin-transform-react-remove-prop-types并新建一个.babelrc进行配置

{
    "presets": [
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-react-remove-prop-types"
    ]
}

再执行webpack打包，打包成功后打开引入js的html，发现成功了
在这里插入图片描述

ZeHome吖

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用Webpack搭建一个React项目

用Webpack搭建一个React项目先搭建一个简单的项目初始化安装所需的依赖新建文件webpack.config.js配置出入口以及module打包并引入开始引入react先搭建一个简单的项目初始化cmd输入npm init，设置相关信息初始化项目。安装所需的依赖新建文件webpack.config.js配置出入口以及moduleconst path = require('path')module.exports = { entry: '/src/index.js',
复制链接

扫一扫