当前位置：网站首页 > 软件专业 > 前端开发专业 > 正文

如何用webpack搭建react脚手架？_惠州前端培训学校

作者：alu发布时间：2022-03-17分类：前端开发专业浏览：796

导读：如何用webpack搭建react脚手架？这是大家在学习前端的过程都会遇到的问题，那么下面我们一起来看看惠州北大青鸟学术部老师是怎么解答的。

如何用webpack搭建react脚手架？这是大家在学习前端的过程都会遇到的问题，那么下面我们一起来看看惠州北大青鸟学术部老师是怎么解答的。

了解webpack的基本概念之后，我们通过实践来加深理解。接下来，我们使用webpack搭建一个简易的react脚手架。

1、创建项目

首先创建react-webpack-starter项目并使用 npm init 初始化。

2、安装依赖

安装react

npm i react react-dom

安装webpack相关

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader

安装webpack-cli后可以在命令行中执行webpack命令；webpack-dev-server提供了简易的web服务器，并且在修改文件之后自动执行webpack的编译操作并自动刷新浏览器，省去了重复的手动操作；html-webpack-plugin用于自动生成index.html文件，并且在index.html中自动添加对bundle文件的引用；style-loader和css-loader用于加载css文件。

安装babel相关

由于react中使用了class, import这样的es6的语法，为了提高网站的浏览器兼容性，我们需要用babel转换一下。

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

其中@babel/core是babel的核心模块，包含了babel的核心功能；@babel/preset-env支持转换ES6以及更新的js语法，并且可根据需要兼容的浏览器类型选择加载的plugin从而精简生成的代码；@babel/preset-react包含了babel转换react所需要的plugin；babel-loader是webpack的babel加载器。

3、配置webpack

在项目根目录下面新建webpack.config.js，内容如下：

webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_module/, use: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] // 注意排列顺序，执行顺序与排列顺序相反 } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }

其中HtmlWebpackPlugin使用自定义的模版来生成html文件，模版的内容如下：

./src/index.html

<!DOCTYPE html> <html> <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>My React App</title> </head> <body> <div id="app"></div> </body> </html>

配置babel

在项目根目录下面新建.babelrc文件，配置我们安装的两个babel preset：

.babelrc

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

生成react应用根节点

./src/index

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

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

./src/component/App.js

import React, { Component } from 'react';
import './App.css';

export default class App extends Component {
  render() {
    return (
      <div>
        my react webpack starter
      </div>
    )
  }
}

./src/components/App.css

body{
  font-size: 60px;
  font-weight: bolder;
  color: red;
  text-transform: uppercase;
}

4、配置 package.json

最后，在package.json文件里面加上两个scripts，用来运行开发服务器和打包：

package.json

"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
}

注意，我们启用了webpack-dev-server的模块热更新功能（HMR），进一步提高我们的开发效率。

到此一个最简版本的react脚手架就搭建完成了，我们运行一下看看效果：

Webåç«¯æ°æä½ ä¼webpackåï¼

想学前端，可以来惠州北大青鸟新方舟校区详细了解。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟

上一篇：Web前端开发|webpack知识_惠州前端培训学校
下一篇：Web前端开发|JavaScript难点_惠州前端培训学校

如何用webpack搭建react脚手架？_惠州前端培训学校

相关推荐