Webpack学习笔记(二) 配置一个React开发环境

Webpack

Publish Date: 2021-06-23

Update Date: 2021-06-23

这篇blog将基于webpack实现一个最最最基本的react开发环境
ps: 我觉得过度依赖开发工具不是好的习惯，因此希望了解一下相关配置

首先初始化一个node环境

npm init

然后初始化相关文件夹，文件结构看起来应该是这样

Project
    |-- webpack.config.js
    |-- package.json
    |-- babel.config.json
    |-- src
        |--index.js
        |--index.html
        |--index.css
        |--App.js

下面打开webpack.config.js, 开始写配置文件

const path = require('path')
const htmlWebpackPluugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')


module.exports = {
    entry: './src/index.js',
    output:{
        path: path.resolve(__dirname, 'dist/'),
        filename: 'dist.js'
    },
    module:{
        rules:[
            {
                test: /\.(js|jsx)/,
                exclude: /(node_modules)/,
                use:[
                    'babel-loader'
                ]
            },
            {
                test: /\.css/,
                use:[
                    miniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new htmlWebpackPluugin({
            template: './src/index.html'
        }),
        new miniCssExtractPlugin()
    ],
    mode: 'development',
    devServer:{
        contentBase: './dist',
        port: 3000
    }
}

只有最简单的配置，需要file-loader可以自行添加

{
    test: /\.(js|jsx)/,
    exclude: /(node_modules)/,
    use:[
        'babel-loader'
    ]
}

使用babel-loader引导babel将jsx转化为js

看一下babel的配置

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

@babel/env包含babel的基础配置，@babel/preset-react将react（jsx）编译成js

然后添加相关的依赖

"devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^1.6.0",
    "style-loader": "^2.0.0",
    "webpack-dev-server": "^3.11.2"
},
"dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
}

无脑npm install即可

使用最简单的React代码测试一下

//App.js
export default function App() {
    return (
        <div>
            Hello World
        </div>
    );
}

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'
ReactDOM.render(
	<App />,
	document.getElementById('root')
);