基于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运行 ...
随机推荐
- Linux中一个文件10行内容，如何输出5-8内容到屏幕
题目是这样的,Linux中一个文件10行内容,如何输出5-8内容到屏幕首先我们模拟一下这样的环境: [root@localhost question]# pwd /root/question [roo ...
- optimal-account-balancing
一群朋友去度假,有时互相借钱. 例如,爱丽丝为比尔的午餐支付了 10 美元.后来克里斯给爱丽丝 5 美元搭出租车.我们可以假设每笔交易为一个三元组(X,Y,Z),这意味着第 X 个人借给第 Y 个人 ...
- sed 命令简介
sed 默认把文件内容全部显示出来(擅长取行 替换) 参数如下: - n 取消默认输出 一般与P一起使用 查看内容‘10,20p’ 显示10-20 行的内容 - i 修改文件内容 - i.bak ...
- Python之字典方法
def clear(self): # 清除所有内容 """ D.clear() -> None. Remove all items from D. "&q ...
- C++算法之大数加法计算的代码
如下代码段是关于C++算法之大数加法计算的代码,希望对大家有用. { int length; int index; int smaller; int prefix = 0; if(NULL == sr ...
- Redis的基本知识
Redis: 1. 概念:开源的高性能键值对数据库, 提供多种键值对数据类型:字符串.(离散)哈希.列表.集合.有序集合类型 内部储存与持久化:内存的读写速度远高于磁盘:自身提供持久化机制(RDB.A ...
- 零基础IDEA整合SpringBoot + Mybatis项目，及常见问题详细解答
开发环境介绍:IDEA + maven + springboot2.1.4 1.用IDEA搭建SpringBoot项目:File - New - Project - Spring Initializr ...
- java代码生成json数据
https://www.cnblogs.com/libo0125ok/p/7905665.html
- 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视
都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...
- vs-code 基础设置
汉化设置: 最新版的vscode 汉化需要两步 1 ctrl+shift+p 在顶部输入框中输入 language 后选择 configure Display Language 后进入 第二张 ...