使用 webpack 搭建一个简单的 React 脚手架

关注

发布于: 2020 年 05 月 24 日

创建项目目录﻿
在合适的位置创建一个项目目录, 可以叫做react-webpack-starter,然后使用 npm init 进行初始化,因为我们要用 node 进行包管理
﻿
安装所需依赖安装 React
npm install react react-dom
安装 webpack﻿
npm install webpack webpack-cli --save-dev
﻿
使用 webpack-cli方便的可以在命令行中执行webpack命令, 因为是开发环境使用,所以命令后面加上了 --save-dev
安装 webpack-dev-server﻿
npm install webpack-dev-server --save-dev
﻿
使用webpack-dev-server可以快速启动一个简易的 web 服务器, 使得我们在修改文件后会自动执行 webpack 的编译操作并且自动刷新浏览器, 不再需要我们手动操作刷新.
安装插件和其他 loader
npm install webpack-html-plugins style-loader css-loader --save-dev
﻿
使用webpack-html-plugins可以自动生成index.html文件, 并会在index.html中自动添加对 bundle 文件的引用;使用style-loader 和 css-loader 可以方便加载 CSS 文件
安装 babel
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
﻿
因为 React 中会使用 class, import 等等 ES6 的语法, 为了提高项目浏览器兼容性,我们需要用 babel 打包转换一下;@babel/core是 babel 的核心模块, 具有 babel 的核心功能;@babel/preset-env 用来转换 ES6 以及更新的 js 语法,并且可根据需要兼容的浏览器来自动选加载 plugin 之后精简生产的代码;@babel/preset-react 具有 babel 转换 React 所需plugin;babel-loader 是 webpack 的 babel 加载器;
配置 webpack安装好所有依赖, 就开始配置 webpack 了;首先在项目文件夹下创建一个webpack.config.js文件
cd 到根目录
mkdir webpack.config.js
可以使用 VSCode 打开, 并编辑内容如下
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_module/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                // 多个 loader 的时候执行顺序和排列顺序相反
                use: ['style-loader', 'css-loader'] 
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
        // 使用自定义模板来生成 HTML 文件
            template: './src/index.html'
        })
    ]
}
module.exports = config;
﻿
创建所使用的 HTML 模板文件, cd 到根目录,然后执行如下命令
mkdir src && cd src && touch index.html
﻿
打开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>React-Starter</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
﻿
配置 babel﻿
cd 到项目根目录,然后执行如下命令, 新建 .babelrc文件
touch .babelrc
打开并编辑配置安装的两个babel preset
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}
生成 React 应用的根节点﻿
创建一个 APP 组件文件﻿
cd 到 项目根目录, 然后执行以下命令:
mkdir components && cd components && touch App.jsx App.css
打开 App.jsx 并编辑:
import React, { Component } from 'react';
import './App.css';
export default class App extends Component {
    render() {
        return (
            <div>
                my react-webpack-start
            </div>
        )
    }
}
打开 App.css 并编辑:
body {
    font-size: 30px;
    text-align: center;
    font-weight: bolder;
    color: #00f;
    text-transform: uppercase;
}
cd 到 src 目录,然后执行以下命令:
touch index.jsx
打开并编辑成如下内容:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render( <App />, document.getElementById('app'));
配置package.json
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
启用了webpack-dev-server的 模块热更新功能, 更加提升开发效率.
﻿
预览脚手架项目﻿
cd 到项目根目录, 然后执行
npm run start
就可以在浏览器打开调试地址：
localhost:8080
﻿
至此，一个基于webpack的React简易项目脚手架就搭建完成了

发布于: 2020 年 05 月 24 日阅读数: 254

张张张小烦

关注

something good will be happen 2018.03.26 加入

前端小卒

发布

暂无评论

创作场景

使用 webpack 搭建一个简单的 React 脚手架

创建项目目录

安装所需依赖

安装 React

安装 webpack

安装 webpack-dev-server

安装插件和其他 loader

安装 babel

配置 webpack

配置 babel

生成 React 应用的根节点

创建一个 APP 组件文件

配置`package.json`

预览脚手架项目

张张张小烦

评论