首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Webpack 4中使用Reactjs开发版本

在Webpack 4中使用Reactjs开发版本,可以按照以下步骤进行:

  1. 首先,确保你已经安装了Node.js和npm(Node.js的包管理器)。
  2. 创建一个新的项目文件夹,并在命令行中进入该文件夹。
  3. 初始化项目并生成package.json文件,可以运行以下命令:npm init -y
  4. 安装React和ReactDOM依赖,可以运行以下命令:npm install react react-dom
  5. 安装Webpack和相关的loader和插件,可以运行以下命令:npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-react html-webpack-plugin --save-dev
  6. 在项目根目录下创建一个webpack.config.js文件,并添加以下配置:const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

代码语言:txt
复制
 entry: './src/index.js',
代码语言:txt
复制
 output: {
代码语言:txt
复制
   path: path.resolve(__dirname, 'dist'),
代码语言:txt
复制
   filename: 'bundle.js',
代码语言:txt
复制
 },
代码语言:txt
复制
 module: {
代码语言:txt
复制
   rules: [
代码语言:txt
复制
     {
代码语言:txt
复制
       test: /\.js$/,
代码语言:txt
复制
       exclude: /node_modules/,
代码语言:txt
复制
       use: {
代码语言:txt
复制
         loader: 'babel-loader',
代码语言:txt
复制
         options: {
代码语言:txt
复制
           presets: ['@babel/preset-react'],
代码语言:txt
复制
         },
代码语言:txt
复制
       },
代码语言:txt
复制
     },
代码语言:txt
复制
   ],
代码语言:txt
复制
 },
代码语言:txt
复制
 plugins: [
代码语言:txt
复制
   new HtmlWebpackPlugin({
代码语言:txt
复制
     template: './src/index.html',
代码语言:txt
复制
   }),
代码语言:txt
复制
 ],
代码语言:txt
复制
 devServer: {
代码语言:txt
复制
   contentBase: path.join(__dirname, 'dist'),
代码语言:txt
复制
   port: 3000,
代码语言:txt
复制
 },

};

代码语言:txt
复制
  1. 在项目根目录下创建一个src文件夹,并在其中创建一个index.js文件作为入口文件。
  2. 在index.js文件中编写React组件的代码,例如:import React from 'react'; import ReactDOM from 'react-dom';

const App = () => {

代码语言:txt
复制
 return <h1>Hello, React!</h1>;

};

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

代码语言:txt
复制
  1. 在项目根目录下创建一个src文件夹,并在其中创建一个index.html文件作为模板文件。
  2. 在index.html文件中添加一个具有id为"root"的div元素,例如:<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
  3. 在命令行中运行以下命令来启动开发服务器:npx webpack serve --mode development
  4. 打开浏览器,访问http://localhost:3000,你将看到一个显示"Hello, React!"的页面。

以上是在Webpack 4中使用Reactjs开发版本的基本步骤。在实际开发中,你还可以根据需要添加其他loader和插件,进行代码分割、优化等操作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

1分55秒

uos下升级hhdesk

10分11秒

10分钟学会在Linux/macOS上配置JDK,并使用jenv优雅地切换JDK版本。兼顾娱乐和生产

17分43秒

MetPy气象编程Python库处理数据及可视化新属性预览

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券