基于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运行 ...
随机推荐
- PHP7.X连接SQLSERVER数据库（CENTOS7）
加入微软的源 curl https://packages.microsoft.com/config/rhel/7/prod.repo > /etc/yum.repos.d/mssqlreleas ...
- JS 跳出多重循环
今天学到了如何跳出多重循环
- python全栈开发笔记---------函数
一 数学定义的函数与python中的函数 初中数学函数定义:一般的,在一个变化过程中,如果有两个变量x和y,并且对于x的每一个确定的值,y都有唯一确定的值与其对应,那么我们就把x称为自变量,把y称为因 ...
- XE 使用记录
project的选项是分编译版本的,debug,release,上层还有一个base 通用的设置值,最好放base里,比如Search path里 自己添加的路径,免得2个环境分别添加.
- 详解Python的作用域和命名空间
最近在学习Python,不得不说,Python真的是一门很好用的语言.但是学习的过程中关于变量作用域(scope)的命名空间(namespace)的问题真的把我给搞懵了.在查阅了相关资料之后,觉得自己 ...
- Mongodb Mysql NoSQL的区别和联系
MongoDB 什么是MongoDB? MongoDB是一个基于分布式文件存储的数据库,由C++语言编写,皆在为WEB应用提供可扩展的高性能数据存储解决方案 MongoDB是一个介于关系数据库和非关系 ...
- Html骨架、基本语法
万丈高楼平地起,勿贪快,脚踏实地,才能仰望星空 一.HTML骨架 标准骨架 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- java算法01 - 链表
1.链表 在Java中实现链表,每个节点都有一个值,然后把它链接到下一个节点.下面来看一下节点的实现 class Node<E> { private E e; private Node&l ...
- cookie和sesssion
一.cookie cookie和session都可以暂时保存在多个页面中使用的变量,但是它们有本质的差别. cookie存放在客户端浏览器中,session保存在服务器上.它们之间的联系是sessio ...
- webdriver的三种时间等待（ sleep()； implicitly_wait()； WebDriverWait()；）
https://blog.csdn.net/HeatDeath/article/details/71774572 基于<Selenium 2自动化测试实战>的学习笔记(11)—— 设置等待 ...