Webpack搭建React开发环境步骤

最新推荐文章于 2021-07-12 16:00:16 发布

wx前端小白

最新推荐文章于 2021-07-12 16:00:16 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/weixin_47055226/article/details/109998807

版权

Webpack搭建React开发环境的具体步骤

先创建一个myapp的文件夹，然后运行cmd

第一步安装模块

初始化，生成package.json

npm init -y

安装react模块

#安装react
cnpm install react --save
#安装react-dom
cnpm install react-dom --save

安装webpack工具

#安装webpack和webpack-cli
cnpm install webpack webpack-cli --save-dev

安装babel相关

#安装babel和react相关加载器
cnpm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D

安装css加载器

cnpm i css-loader style-loader -D

安装html插件

cnpm i html-webpack-plugin -D

生产环境和开发环境

开发环境：–save-dev / -D

生产环境：–save / -S

二、创建目录结构

在这里插入图片描述

myapp

public 静态资源文件目录

src 项目源文件目录

dist 打包文件目录

webpack.config.js webpack配置文件

package.json NPM包管理配置文件

node_modules 项目中的依赖存放目录

在public目录下，创建index.html，该文件为项目的默认首页

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

    </div>
</body>
</html>

2.在src目录下，创建index.js，该文件为项目的入口文件

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

//参数1为JSX代码，参数2为挂载点
//使用XML规范的JS扩展
//HTML为预定义标签
ReactDOM.render(<div>Hello Hello Hello!</div>,document.getElementById('root'));

3.在项目的根目录下创建webpack.config.js配置文件，依次完成以下配置：

（1）配置入口（entry）:指示 webpack 应该使用哪个模块，来作为构建其内部***依赖图***的开始。

（2）配置出口（output）：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

（3）配置加载器（loader）：让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

（4）配置插件（plugin）：loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。

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

module.exports = {
    //配置入口（entry）**
    entry:'./src/index.js',
    //配置出口（output）**
    output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: 'main.js'
    },
    //配置加载器（loader）
    module:{
		rules:[
			{
				test: /\.jsx?$/, // jsx/js文件的正则
				exclude: /node_modules/, // 排除 node_modules 文件夹
				use:{
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            // 添加 preset-react
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
			}
		]
    },
    //配置插件（plugin）
    plugins:[
		new HtmlWebPackPlugin({
			template: 'public/index.html',
			filename: 'index.html',
			inject: true
		})
	]
}

在 package.json 文件添加 build 项

在这里插入图片描述

执行打包命令：

npm run build

wx前端小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack搭建React开发环境步骤

Webpack搭建React开发环境的具体步骤先创建一个myapp的文件夹，然后运行cmd第一步安装模块初始化，生成package.jsonnpm init -y安装react模块#安装reactcnpm install react --save#安装react-domcnpm install react-dom --save安装webpack工具#安装webpack和webpack-clicnpm install webpack webpack-cli --save-dev
复制链接

扫一扫