基于webpack的react开发环境搭建新手教程

时间：2023-01-23 10:51:32

最近学习react-webpack项目搭建，找到一篇我认为不错的博客，跟着学习了一番，写得很详细很好，本篇博客纯属记录总结，要看更详细的搭建过程及解析，请戳：

基于webpack的React项目搭建（一）

一、项目创建

1. 新建项目文件夹（手动新建或者执行命令：mkdir webpack-react），这里以webpack-react作为项目文件夹名称

2. 进入文件夹webpack-react，然后执行初始化命令：npm init

3. 在webpack-react下创建下列相应文件夹和文件：

　　bin　

　　　　|--dev-server.js　（webpack-dev-server配置文件）

　　src(项目主文件夹,后面编写的文件大多都放在这里)

　　　　|--App.js

　　　　|--index.js

　　　　|--index.template.html

　　webpack(webpack配置文件夹)

　　　　|--webpack.config.js

　　.babelrc(babel配置文件，json)

二、根目录下执行命令，安装react、webpack

　　 npm install react react-dom --save

　　npm install webpack --save-dev

　　如果你使用 webpack 4+ 版本，你还需要安装 CLI:  npm install --save-dev webpack-cli

　　注：这里选择在项目本地安装webpack。不推荐全局安装 webpack，全局安装webpack会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。在node_modules/.bin/文件夹里执行命令查看webpack版本: webpack -v

三、安装Babel相关

　　因为react使用不能被浏览器直接解析的jsx语法，需引入Babel进行转码，执行命令：

　　npm babel-core babel-loader babel-preset-es2015 babel-preset-react --save

　　注： babel-loader：babel加载器；    babel-preset-es2015：支持es2015；   babel-preset-react： jsx 转换成js；

四、安装webpack-dev-server，项目根目录下执行命令：

　　 npm install webpack-dev-server --save-dev

五、安装html-webpack-plugin，项目根目录下执行命令：

　　npm install html-webpack-plugin --save-dev

六、各文件代码如下：

　　bin/dev-server.js

 'use strict'

 const WebpackDevServer = require('webpack-dev-server');

 const config = require('../webpack/webpack.config');

 const webpack = require('webpack');

 const path = require('path');

 const compiler = webpack(config);

 const server = new WebpackDevServer(compiler, {

     contentBase: path.resolve(__dirname, '../dist'), //默认会以根文件夹提供本地服务器，这里指定文件夹

     historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

     port: 9090, //如果省略，默认8080

     publicPath: "/"

 });

 server.listen(9090, 'localhost', function (err) {

     if (err) throw err

 })

　　src/App.js

 /*

 *  引入的模块是否需要用{}包裹，取决于该模块被导出时是否默认导出

 *  比如这里的 App 使用export default 默认导出， 在其他地方需要引入App时，则不需要{}包裹

 */

 import React, { Component } from 'react';

 export default class App extends Component{

   render () {

     return (

       <div>Hello React-webpack!</div>

     )

   }

 }

　　src/index.js

 import React from 'react';

 import ReactDOM from 'react-dom';

 import App from './App';

 ReactDOM.render(

   <App />,

   document.getElementById('app')

 )

　　src/index.template.js

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title><%= htmlWebpackPlugin.options.title %></title>

     </head>

     <body>

         <div id="app">

         </div>

     </body>

 </html>

　　webpack/webpack.config.js

 const path = require('path');

 const webpack = require('webpack');

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

 module.exports = {

     mode: "development",

     entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录

     output: {

         path: path.resolve(__dirname, '../dist'), // 输出的路径

         filename: 'app/[name]_[hash:8].js'  // 打包后文件

     },

     module: {

         rules: [

             {

                 test: /\.(js|jsx)$/,

                 loader: 'babel-loader',

                 exclude: /node_modules/

             }

         ]

     },

 　　 plugins: [

     // Html-webpack-plugin配置

 　　 　　new HtmlWebpackPlugin({

 　　　　 　　template: path.resolve(__dirname, '../src/index.template.html'),

 　　　　　　 inject: true

 　　　　 })

 　　 ]

 }

　　.babelrc

 {

   "presets": [

     "es2015",

     "react"

   ]

 }

七、基础的环境就搭建好了，在根目录下运行： npm run dev，然后浏览器访问  http://localhost:9090  ，如果看到Hello React-webpack!  就说明搭建成功了。

　　

　　

基于webpack的react开发环境搭建新手教程的更多相关文章

  1. 基于webpack的vue开发环境搭建

    1.新建并初始化项目(npm int -y),安装webpack,webpack-cli webpack-dev-server 安装eslint,eslint-plugin-vue,配置eslint语 ...

  2. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

  3. 详解 Webpack&plus;Babel&plus;React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  4. 搭建 webpack、react 开发环境（三）

    配置 react-router-dom   我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...

  5. 搭建 webpack、react 开发环境（二）

    配置处理样式文件   到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...

  6. 搭建 webpack、react 开发环境（一）

    基本介绍   Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...

  7. 基于IDEA的JavaWeb开发环境搭建

    基于IDEA的JavaWeb开发环境搭建 基于IDEA的JavaWeb开发环境搭建 jdk下载安装配置环境变量 下载 安装 配置环境变量 下载安装激活使用IntelliJ IDEA 下载 安装 激活 ...

  8. 基于webpack4的react开发环境配置

    一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...

  9. 基于Eclipse的Android开发环境搭建

    1.  Java开发环境搭建 1.1  JDK下载安装 JDK(Java Development Kit )是针对Java开发人员发布的软件开发工具包.JDK 是整个Java的核心,包括了Java运行 ...

随机推荐

  1. Django知识点整理

    什么是web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. web应用 访 ...

  2. &lbrack;BZOJ1106&rsqb;&lbrack;POI2007&rsqb; Tet 立方体大作战

    Description 一个叫做立方体大作战的游戏风靡整个Byteotia.这个游戏的规则是相当复杂的,所以我们只介绍他的简单规则:给定玩家一个有2n个元素的栈,元素一个叠一个地放置.这些元素拥有n个 ...

  3. poj3013 邻接表&plus;优先队列&plus;Dij

    把我坑到死的题 开始开题以为是全图连通是的最小值 ,以为是最小生成树,然后敲了发现不是,看了下别人的题意,然后懂了: 然后发现数据大,要用邻接表就去学了一下邻接表,然后又去学了下优先队列优化的dij: ...

  4. asp&period;net下webform的ReadOnly和Enabled属性最终渲染的结果

    ReadOnly对应readonly="readonly" Enabled对应disabled="disabled" 然后研究了一下这两种的用法,特此标记一下: ...

  5. 判断CAD图纸版本

    判断CAD图纸版本Dwg文件版本 使用记事本打开DWG图纸文件,在最开始有6个字母和数字组合,即为图纸的版本号 AC1015:CAD2000版本: AC1018:CAD2004版本: AC1021:C ...

  6. 【百度地图API】JS版本的常见问题

    1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...

  7. &lbrack;河南省ACM省赛-第三届&rsqb; 素数 （nyoj 169）

    #include <iostream> #include <cstdio> #include <queue> #include <cstring> #i ...

  8. js上拉跳转原理

    今天遇到一个需要上拉跳转的地方,其原理跟上拉加载有点类似,代码如下 window.onscroll = function(){ if(getScrollTop() + getClientHeight( ...

  9. bzoj2876 &lbrack;NOI2012&rsqb;骑行川藏（拉格朗日乘数法）

    题目描述 蛋蛋非常热衷于挑战自我,今年暑假他准备沿川藏线骑着自行车从成都前往拉萨.川藏线的沿途有着非常美丽的风景,但在这一路上也有着很多的艰难险阻,路况变化多端,而蛋蛋的体力十分有限,因此在每天的骑行 ...

  10. Linux学习之CentOS&lpar;八&rpar;----文件与目录的默认权限与隐藏权限（转）

    文件与目录的默认权限与隐藏权限 一个文件有若干个属性, 包括读写运行(r, w, x)等基本权限,及是否为目录 (d) 与文件 (-) 或者是连结档 (l) 等等的属性! 要修改属性的方法在前面也约略 ...

相关文章