使用webpack搭建react项目

最新推荐文章于 2024-05-07 03:35:08 发布

原创最新推荐文章于 2024-05-07 03:35:08 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#webpack创建react

React 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何从零开始搭建一个React项目，包括初始化项目、安装依赖、配置webpack及Babel，实现开发环境的快速启动与部署。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化项目

新建一个文件夹，进入此文件夹，执行:

npm init

在这里插入图片描述
执行完之后在项目上会出现package.json文件

安装依赖

安装开发环境依赖:

npm install --save-dev babel-core babel-loader babel-plugin-import babel-preset-latest babel-preset-react babel-preset-stage-0 clean-webpack-plugin css-loader file-loader html-webpack-plugin node-sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server

a> 其中babel系列支持我们使用ES6语法（具体项目可选）；
b> webpack系列（包括各种加载器）是我们的模块打包工具，也是搭建开发环境的重要成员。
c> webpack4需搭配webpack-cli使用

安装react依赖：npm install --save react react-dom react-router-dom
安装完成之后package.json中会多出两个属性：devDependencies、dependencies，如图：

配置执行命令

package.json中修改scripts属性为：

"scripts": {
    "dev": "webpack-dev-server --hot --inline --colors --config config/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "webpack --progress --colors --config config/webpack.prod.conf.js"
  },

dev字段配置开发环境命令npm run dev：

webapck-dev-server启动开发环境服务器，
–config config/webpack.dev.conf.js表示输入npm run dev时，实际执行的文件是package.json同级目录下，config文件夹下的webapck.dev.conf.js文件（自己编写）。如果去掉，将执行默认配置，这里我们将全部使用自己写的配置，以便更好地发现和解决问题。

创建项目目录

新增目录文件，分别添加config、src文件夹、index.html文件，在config文件夹中添加webpack的配置，src文件夹为js文件,在src文件夹下添加：main.js、App.js文件
在这里插入图片描述

config目录存放webpack配置文件：
a> webpack.base.conf.js为公用配置；
b> webpack.dev.conf.js为开发环境配置，继承自webpack.base.conf.js；
c> webpack.prod.conf.js为生产环境配置，继承自webpack.base.conf.js。
src目录存放项目代码：
a> main.js为项目入口文件，负责挂载react组件到
上；
b> App.js为React项目根组件，components为具体的react组件（这些在环境搭建完成之后才会做细分）。
main.js配置：

import React from 'react';
import ReactDOM from 'react-dom';

class Main extends React.Component{
    render() {
        return(
            <div>Hello World!</div>
        );
    }
}
ReactDOM.render(<Main/>, 
    document.getElementById('root'));

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>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

webpack开发配置

接下来的配置需先安装依赖： webpack-merge、uglifyjs-webpack-plugin。（更多配置请按需引入）
重点在于入口、出口、plugins，这几个配好了就可以启动了。其他的是后期要优化的，比如热更新、代码分离等。
webpack.base.conf.js关键配置如下：

'use strict'
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口起点
  entry: {
    app: './src/main.js',
  },
  // 输出
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "[name].js",
  },
  // 解析
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  // loader
  module: {
    rules: [
      {
        test: /\.js|jsx$/,
        exclude: /(node_modules|bower_components)/,// 屏蔽不需要处理的文件（文件夹）（可选）
        loader: 'babel-loader'
      }
    ]
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    })
  ]
};

webpack.dev.conf.js配置如下：

'use strict'
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

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

module.exports = merge(baseWebpackConfig, {
  // 模式
  mode: "development",
  // 调试工具
  devtool: 'inline-source-map',
  // 开发服务器
  devServer: {
    contentBase: false,// 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录
    historyApiFallback: true,// 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
    compress: true,// 启用gzip压缩
    inline: true,// 设置为true，当源文件改变时会自动刷新页面
    hot: true,// 模块热更新，取决于HotModuleReplacementPlugin
    host: '127.0.0.1',// 设置默认监听域名，如果省略，默认为“localhost”
    port: 8703// 设置默认监听端口，如果省略，默认为“8080”
  },
  // 插件
  plugins: [
    // 热更新相关
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    nodeEnv: 'development',
  }
});

.babelrc配置如下：

{
  "presets": ["latest", 'react', "stage-2"],
  "plugins": []
}

现在我们尝试启动一下npm run dev，报错如下：
在这里插入图片描述
babel-loader版本问题，降级到7.x.x版本（如7.1.5）即可。如下图所示即运行成功：
运行命令:npm install
否则改变的包没有加载进项目里
配置webpack.prod.conf.js如下：

'use strict'
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
  // 模式
  mode: "production",
  // 调试工具
  devtool: '#source-map',
  // 输出
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "js/[name].[chunkhash].js",
  },
  // 插件
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HashedModuleIdsPlugin(),
  ],
  // 代码分离相关
  optimization: {
    nodeEnv: 'production',
    minimizer: [new UglifyJSPlugin()],
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial',
        }
      }
    }
  }
});