基于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运行 ...
随机推荐
- 路由导航之第一个子模块（HomeModule）
git clone git@github.com:len007/my-angular2-app.git my-angular2-app 开始 一个URL = 一个页面 = 一个Component. 我 ...
- asp.netmvc部署到linux(centos)
介绍将asp.netmvc项目部署到centos系统. 开发工具:win10+vs2017+.NetFramework4.6.1+Vmware14+centos 1.安装Jexus 这里使用独立版(专 ...
- 缺少新的栈标识：报出异常FLAG_ACTIVITY_NEW_TASK flag-是由于activity关闭之后开启一个新的acitivity时没有标识在栈中，所以需要给一个栈标识
异常(栈里必须有activity的flag标识): 05-02 08:43:36.173: E/AndroidRuntime(3328): android.util.AndroidRuntimeExc ...
- flask 第五章 WebSocket GeventWebsocket 单聊群聊 握手 解密 加密
1.WebSocket 首先我们来回顾一下,我们之前用socket学习过的项目有: 1.django 2.flask 3.FTP - 文件服务 HTTP - TCP (特点): 1.一次请求,一次响应 ...
- [Leetcode 72]编辑距离 Edit Distance
[题目] Given two words word1 and word2, find the minimum number of operations required to convert word ...
- Java的数组，集合，数据结构，算法（一）
本人的愚见,博客是自己积累对外的输出,在学习初期或自己没有多少底料的情况下,与其总结写博客不如默默去搞自己的代码,但是学到集合这一块时,数组,集合,数据结构,算法这个概念搞的我比较混淆,所以不得已写这 ...
- Quartz 2.2 动态添加、修改和删除定时任务
QuartzManager.Java 动态添加.修改和删除定时任务管理类 import org.quartz.CronScheduleBuilder; import org.quartz.CronTr ...
- Problem A: 让动物们叫起来吧！
Description Tom家里养了很多动物,比如有鸭子.火鸡和公鸡.它们的叫声都不相同.现在,请编写类Animal.Cock.Turkey和Duck,根据给出的main()函数及样例分析每个类的属 ...
- Educational Codeforces Round 63 (Rated for Div. 2) D. Beautiful Array (简单DP)
题目:https://codeforces.com/contest/1155/problem/D 题意:给你n,x,一个n个数的序列,你可以选择一段区间,区间的数都乘以x,然后求出最大字段和 思路: ...
- Linux----Github环境搭建
前面介绍了在Windows环境上安转GitHub环境,原本以为打包成jar,发布到Linux不需要再安转Git,但是因为我们使用了Config-Server配置中心,远程配置来启动,所以需要在Linu ...