基于webpack的react开发环境搭建新手教程
最近学习react-webpack项目搭建，找到一篇我认为不错的博客，跟着学习了一番，写得很详细很好，本篇博客纯属记录总结，要看更详细的搭建过程及解析，请戳：
一、项目创建
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开发环境搭建新手教程的更多相关文章
- 基于webpack的vue开发环境搭建
1.新建并初始化项目(npm int -y),安装webpack,webpack-cli webpack-dev-server 安装eslint,eslint-plugin-vue,配置eslint语 ...
- 从零开始搭建一个简单的基于webpack的vue开发环境
原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...
- 详解 Webpack+Babel+React 开发环境的搭建
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...
- 搭建 webpack、react 开发环境（三）
配置 react-router-dom 我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...
- 搭建 webpack、react 开发环境（二）
配置处理样式文件 到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...
- 搭建 webpack、react 开发环境（一）
基本介绍 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...
- 基于IDEA的JavaWeb开发环境搭建
基于IDEA的JavaWeb开发环境搭建 基于IDEA的JavaWeb开发环境搭建 jdk下载安装配置环境变量 下载 安装 配置环境变量 下载安装激活使用IntelliJ IDEA 下载 安装 激活 ...
- 基于webpack4的react开发环境配置
一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...
- 基于Eclipse的Android开发环境搭建
1. Java开发环境搭建 1.1 JDK下载安装 JDK(Java Development Kit )是针对Java开发人员发布的软件开发工具包.JDK 是整个Java的核心,包括了Java运行 ...
随机推荐
- week5
本节大纲: 1.模块讲解 2.hashlib and hmac 3.random 4.shelve 5.shutil 6.time and datetime 7.os and sys 8.re 9.x ...
- ESP32搭建2.虚拟机与物理机实现文件传输
为后期操作方便,搭建实现虚拟机和物理机的文件直传. 1. 将安装好的虚拟机打开,点击VMware的虚拟机标签中的更新VMware Tools,等待一小会,虚拟CD盘中弹出文件 2.将压缩包Co ...
- 浅谈Vector、ArrayList、LinkedList
下图是Collection的类继承图 从图中可以看出:Vector.ArrayList.LinkedList这三者都实现了List 接口.所有使用方式也很相似,主要区别在于实现方式的不同,所以对不同的 ...
- 关于JDCB连接oracle数据库。
1:什么是JDBC(百度可详细解释) JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为 ...
- ASP.NET MVC4应用程序配置跨域访问
开发框架是使用webapi做后台,HTML5做前台,通过ajax调用webapi后台,返回json结果. 用的编译器是visual Studio2013,下面是配置方法 1.web.config文件 ...
- python的标准数据类型
python有5种标准的数据类型 1. number(数字) int(有符号的整形) long(长整[也可以代表八进制和16进制]) float(浮点型) complex(复数类型) 2.string ...
- 微信小程序(mpvue)—解决视频播放bug的一种方式
// 第一页 <div @click="play(video.src, video.width, video.height)"></div> methods ...
- 第四次Scrum编码冲刺
第四次Scrum编码冲刺!!!! 一.总体任务: 本次冲刺是完成对图书馆管理系统的最后三个功能的实现------管理员对用户授权.用户注销和用户查询 二.个人任务及完成情况: 本人本次的任务是实 ...
- python安装后环境变量的设置
win7系统中单击右击计算机->属性->高级系统设置->环境变量 在path目录下用分号分开做分割添加环境变量. 如果同时添加python2.x.x版本和python3.x.x版本两 ...
- java基础继承
为什么用继承: 因为继承可以减少代码的冗余,提高维护性,为了从根本上解决存在的问题,就需要继承,就是将多个类当中的相同的地方提取到一个父类当中.父类更通用,子类更具体. 父类的继承格式 语法:publ ...