从零搭建Webpack5-react脚手架助力开发效率提升

2024-01-09 18:47:21

随着Web开发技术的不断发展，构建工具也变得越来越重要。Webpack5作为一款流行的构建工具，因其模块化、可配置性和扩展性等优势，深受开发者的青睐。本文将介绍如何从零搭建一个Webpack5-react脚手架，以帮助开发者快速搭建react项目，提高开发效率。

脚手架的搭建

首先，我们需要创建一个新的项目目录，并安装必要的依赖包。

mkdir my-app
cd my-app
npm install --save-dev create-react-app webpack webpack-cli

然后，我们就可以使用create-react-app脚手架工具来创建react项目。

npx create-react-app my-app

完成之后，我们就需要在项目中安装webpack5。

npm install --save-dev webpack@5 webpack-cli

接下来，我们需要配置webpack.config.js文件。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  devServer: {
    static: './dist',
    port: 3000,
  },
};