react+webpack+babel通用的简易开发环境配置

最新推荐文章于 2024-08-25 09:39:39 发布

Cynthia_Wiki

最新推荐文章于 2024-08-25 09:39:39 发布

阅读量698

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react webpack 文章标签： react配置前端 webpack

本文链接：https://blog.youkuaiyun.com/Cynthia_Wiki/article/details/97000068

react 同时被 2 个专栏收录

9 篇文章

订阅专栏

webpack

2 篇文章

订阅专栏

本文档介绍了如何配置一个基于React、webpack和Babel的前端开发环境。包括webpack的基本配置、Babel的设置、React应用创建、模块热更新的实现以及npm脚本的配置。通过这些步骤，可以搭建一个基础的React开发环境。

webpack 配置

新建一个空的文件夹
在新建的文件里打开cmd，依次输入以下指令，就会看见文件夹根目录多了package.json和node_modules文件了

/* 初始化项目得到package.json文件 */
npm init 
/* 开发环境安装，两种方式选择其中一个即可 */
npm i webpack webpack-cli  webpack-dev-server -S 
/* 全局安装 */
npm i webpack webpack-cli webpack-dev-server -g

根目录新建webpack.config.js文件，webpack构建的一些列配置在这个文件里面配置，很是方便灵活
cmd中执行以下指令，安装html-webpack-plugin这个插件，这个插件是打包时自动生成index.html并且往index.html插入打包后的js

npm i html-webpack-plugin -S

webpack基本的配置项如下

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  mode: 'none',
  entry: {
    app: path.resolve(APP_PATH,
      'index.jsx')
  },
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  devtool: 'eval-source-map',
  devServer: {
    hot: true, //热更新需要的配置
    inline: true,
    progress: true,
    historyApiFallback: true
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: []
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'my react test',
      template: "./public/index.html" // 配置模板文件
    })
  ]
}

babel 配置

安装需要用到的babel插件

npm i @babel/cli  @babel/core @babel/preset-env @babel/preset-react babel-loader -S

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "env": {
    "development": {
      "presets": [
        ["@babel/preset-react", {
          "development": true
        }]
      ]
    }
  },
  "plugins": []
}

在webpack 里面添加babel配置

 module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      include: APP_PATH,
      exclude: /node_modules/
    }]
  },

react 配置

安装react相应开发包

npm i react react-dom -D

新建public和src文件夹
public目录下新建index.html，src目录下为项目源码文件，入口文件index.jsx个人喜好放在src里面，暂且先放这个，什么page、component、router、redux之类的目录，后续根据自己的需求去放咯。
index.html里面写入一个ID为root的DOM元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>

</html>

入口文件index.jsx里写点东西好测试

import React from 'react';
import ReactDOM from 'react-dom';
class APP extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="container">
        <h1>hello react</h1>
        <h2>I love react</h2>
      </div>
    );
  }
}
ReactDOM.render(<APP />, document.getElementById('root'));

模块热更新配置

需要的相应开发包

npm i react-hot-loader -S

入口文件里引入安装好loader

import { AppContainer } from 'react-hot-loader';

webpack的配置文件里面添加热更新所需配置
3.1. devServer配置项里的hot值要为true

3.2. 在plugins里面添加如下代码

 new webpack.HotModuleReplacementPlugin()

修改入口文件如下，至此热更新配置完成

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
class APP extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="container">
        <h1>hello react</h1>
        <h2>I love react</h2>
      </div>
    );
  }
}
const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  );
};
render(APP);
if (module.hot) {
  module.hot.accept(() => {
    ReactDOM.render(<APP />, () => {
      render(APP);
    });
  });
}

npm script 脚本的配置

 "scripts": {
    "build": "webpack --production",
    "dev": "webpack-dev-server --open --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

经鄙人测试证明，执行相应命令就可以看到相应配置结果啦