如何使用webpack给react打包_webpack打包react组件-优快云博客

本文链接：https://blog.youkuaiyun.com/application16/article/details/129291570

要使用webpack打包react，你需要安装一些依赖项，配置webpack和babel，以及编写你的react代码。

一些常用的依赖项包括：

webpack和webpack-cli：用于运行webpack命令和配置文件
webpack-dev-server：用于在开发环境中提供一个实时更新的服务器
html-webpack-plugin：用于生成一个HTML文件来引入你的打包后的代码
babel-loader，@babel/core，@babel/preset-env和@babel/preset-react：用于将ES6和JSX语法转换为浏览器可以理解的代码

你可以使用npm或yarn来安装这些依赖项。

然后，你需要创建一个webpack.config.js文件来配置webpack的入口，输出，模式，插件和加载器。

最后，你需要在package.json中添加一些脚本来运行webpack或webpack-dev-server。

如果你想分析你的打包结果，你可以使用webpack-bundle-analyzer插件来生成一个可视化报告。

示例代码
package.json

{
  "name": "webpack-for-react",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "analyze": "webpack --profile --json > stats.json 
            && webpack-bundle-analyzer stats.json"
  },
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@babel/preset-react": "^7.16.5",
    "babel-loader": "^8.2.3",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.65.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js", // the main entry point of your application
  output: {
    path: path.resolve(__dirname, "./dist"), // the output directory
    filename: "[name].[contenthash].js", // the output filename with a hash for cache busting
  },
  mode: process.env.NODE_ENV || 'development', // the mode of webpack, either development or production
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html", // the HTML template to use
      filename: "./index.html", // the output HTML file name
      inject: true, // inject the bundled scripts into the body tag
      minify: true, // minify the HTML in production mode
      title: 'Webpack for React', // set the title of the HTML document
      favicon: './src/favicon.ico' // set the favicon of the HTML document
    }),
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/, // match files with .js or .jsx extension
        exclude: /node_modules/, // exclude files in node_modules directory
        use: ["babel-loader"], // use babel-loader to transpile ES6 and JSX syntax
      },
      {
        test:/\.css$/, // match files with .css extension 
        use:['style-loader','css-loader']    // use style-loader and css-loader to handle CSS files 
       }
     ]
   },
   resolve:{
     extensions:['*','.js','.jsx']    // resolve files without extensions or with .js or .jsx extensions 
   }
};

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

src/App.js

import React from 'react';
import './App.css';

function App() {
 return (
   <div className="App">
     <h1>Hello, world!</h1>
     <p>This is a simple React app bundled with webpack.</p>
   </div>
 );
}

export default App;

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <div id="root"></div>
</body>
</html>

备注：