react 环境配置初始化

React项目搭建与Webpack配置

最新推荐文章于 2024-12-25 15:31:20 发布

原创最新推荐文章于 2024-12-25 15:31:20 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍使用React和Webpack搭建项目的过程，包括初始化项目、安装依赖、配置Webpack进行热加载等步骤，并分享了一些常见问题及解决方案。

第一步：项目初始化

npm init -y

第二步：安装依赖

npm install react react-dom babel-preset-react babel-loader es2015 babelify--save-dev

第三步：webpack热加载

全局安装$ npm install webpack webpack-cli -g
$ npm install webpack-dev-server -g

项目下安装$ cnpm install webpack webpack-cli --save-dev
$ cnpm install webpack-dev-server --save-dev

在项目目录下创建 webpack.config.js 文件

添加内容

var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname),
  entry: "./src/js/index.js",
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"
  },
};