webpack配置react项目

配置webpack打包

新建一个项目文件夹
输入命令

git init
yarn init
yarn add webpack webpack-cli -D

新建webpack.config.js webpack.confog.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output:{
    path:path.resolve(__dirname,'./dist'),
    filename:'[name].bundle.js'
  }
}

修改package.json packge.js

{
  "name": "web-automation",
  "version": "1.0.0",
  "main": "index.js",
  "author": "liumingtao <18670141358@163.com>",
  "license": "MIT",
  "scripts": {
    "build": "webpack"
   },
  "devDependencies": {
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.1"
  }
}

运行命令

yarn run build   // 会根据webpack配置生成一个dist文件夹，有dist文件夹就说明配置成功了

新增html-webpack-plugin插件（自动将bundle打包进HTML中）

yarn add html-webpack-plugin -D

新增index.html index.html

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root"> </div>
</body>

</html>

修改webpack.config.js webpack.config.js

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html'
    })
  ]
}

运行命令

yarn run build   // dist文件有新增index.html文件就说明配置成功

添加babel

yarn add babel-loader @babel/core @babel/preset-env -D

配置babel.config.json babel.config.json

{
  "presets": ["@babel/preset-env"]
}

添加webpack-dev-server

yarn add webpack-dev-server -D

修改webpack.config.js webpack.config.js

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

module.exports = {
  entry: './src/index.js',
  mode: 'development',  // 开发模式
  devtool: 'inline-source-map', // 追踪报错代码位置
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  devServer: {
    historyApiFallback: true,
    open: true,
    port: 8080,
  },
}

运行命令

yarn run build   // 如果自动打开了浏览器的http://localhost:8080/ 则说明配置成功

添加React

yarn add react react-dom @types/react @types/react-dom
yarn add @babel/preset-react -D

修改webpack.config.js webpack.config.js

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

module.exports = {
  entry: './src/index.jsx',
  mode: 'development',  // 开发模式
  devtool: 'inline-source-map', // 追踪报错代码位置
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  devServer: {
    historyApiFallback: true,
    open: true,
    port: 8080,
  },
}

将之前的 index.js 替换成 index.jsx文件 index.jsx

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


const App = () => {
 return <div>hello react webpack</div>;
};

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

忽略提交git的文件配置 .gitignore

/node_modules
/dist
yarn.lock

最终的文件架构

|- dist
    |- index.html
    |- main.bundle.js
|- node_modules
|- src
    |- index.jsx
|- .gitignore
|- babel.config.json
|- index.html
|- package.json
|- webpack.config.js
|- yarn.lock

执行的所有命令

git init
yarn init
yarn add webpack webpack-cli -D
yarn add html-webpack-plugin -D
yarn add babel-loader @babel/core @babel/preset-env -D
yarn add webpack-dev-server -D
yarn add react react-dom @types/react @types/react-dom
yarn add @babel/preset-react -D

yarn run start
yarn run build

PS

希望大家都可以找到在工作中的乐趣。
热爱前端技术。
新手交流点这里 -->有兴趣一起摸鱼的点击这里