react+webpack开发环境配置
react是目前非常热门的前端框架,提倡组件化开发。所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体。
webpack,是一个模块打包工具,其主要功能,就是将浏览器端无法识别的代码,通过各种loader和plugin,生成浏览器可用的代码。比如,我们可以在浏览器端使用ES2015和JSX编码的文件。
在使用react进行组件化开发之前,我们首先需要配置一个我们可以使用的开发环境,下面,我们将一步步讲解,配置一个基本的开发环境。其中安装的文件都是当前最新版本。在开始之前,请先保证你已经安装了node。
1. 创建测试项目
为了可以让我们每一步都可以进行测试,了解其中都做了什么,我们提前编写我们的测试项目。大家可以先不用深入理解。(在我们以后的项目中,我们可能会用JSX文件和sass文件,在这里我们尽量真实且简单的还原项目)。
1)首先我们创建一个项目文件夹,名为test
2)在文件中添加index.jsx,hello.jsx, index.scss, index.html
// index.scss $color: #f40; h1 {
color: $color;
}
// hello.jsx
module.exports = 'Hello React';
// index.jsx
// 引入react和react-dom模块
// 使用ES2015模块导入语法
import React from 'react';
import ReactDOM from 'react-dom'; // 引入自定义的hello.jsx
var text = require('./hello.jsx'); // 引入我们编写的sass文件
require('./index.scss'); // 编写一个简单的组件
class App extends React.Component {
render(){
return (
<h1>{text}</h1>
);
}
}; // 创建一个组件实例,将组件挂载到文档结构中
ReactDOM.render(<App />, document.body);
// index.html <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My test</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script> // bundle.js是由webpack自动生成的文件,文件名通过配置webpack设置
</body>
</html>
以上是我们项目的基本结构。
为了方便项目文件的管理,我们使用npm,在项目根目录下使用npm init --yes,在根目录下生成一个package.json,管理项目依赖等。
2. 安装webpack
1)以命令行工具的形式使用webpack时,在全局安装webpack。
npm install webpack -g
2) 编写自己的构建脚本,或由项目指定需要依赖的webpack,本地安装,webpack只是构建工具的角色,应该安装在dev-dependencies中,但是,目前我们只使用命令行工具,这种安装方式,只是作为介绍,在之后的搭建过程中并不会用到。
npm install webpack --save-dev
3. 配置基本的webpack
在项目根目录下添加webpack.config.js配置文件,它是一个Node.js模块格式的配置文件,直接导出一个配置对象。
// 用于拼接路径
var path = require('path'); module.exports = {
// 指定项目入口
entry: path.resolve(__dirname, 'index.jsx'), // 对输出结果描述
output: {
// 输出路径
path: path.resolve(__dirname, 'build'),
// 输出的文件名
filename: 'bundle.js'
}, // 配置模块使用的加载器
module: {
loaders: [
{
// 假设我们拥有一个编译sass加载器
// 匹配字符串
test:/\.scss$/,
// 使用的加载器,不可以省略加载器的后缀-loader
loaders:['style-loader', 'css-loader', 'sass-loader']
}
}
}
4. babel,sass加载器
可以从我们的项目结构中发现,我们使用了.jsx文件和.scss文件,浏览器中无法正常使用这类文件,我们通过添加加载器,将进行解析,以便浏览器使用。
1)babel加载器
npm install babel-core babel-loader --save-dev
2)配置.babelrc文件
在项目根目录下创建一个.babelrc文件,存放一个对象,分别用presets字段存放规则,plugins字段存放插件,目前我们只用到ES2015和react规则
npm install babel-preset-es2015 babel-preset-react --save-dev // 添加规则
{
"presets": ["react", "es2015"]
}
3) sass加载器
npm install node-sass style-loader css-loader sass-loader --save-dev
4) 配置webpack.config.js配置文件
// 模块部分更新为下面代码 module: {
loaders: [
{
test:/\.scss$/,
loaders:['style-loader', 'css-loader', 'sass-loader']
},
{
test:/\.jsx?$/,
loaders: ['babel-loader']
}]
},
此时即可正常加载.scss和.jsx文件。
5. 安装react和react-dom
npm install react react-dom --save
到此,我们在项目根目录下执行webpack已经已经在根目录下生成一个bundle.js文件,我们可以正常在index.html文件文件引用,并且在浏览器中查看。
之后的内容,我们将会介绍webpack的插件的用法,以及webpack-dev-server配置方法。
1. html-webpack-plugin
我们可以发现我们index.html文件中,只是一个空的HTML结构和引入了生成的bundle.js文件,因此我们可以利用html-webpack-plugin插件来自动生成index.js文件。
1) 下载插件
npm install html-webpack-plugin --save-dev
2)配置webpack.config.js文件
首先在文件头部引入插件,然后在添加一个plugins字段,并在其中一个插件对象实例。
var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports ={
plugins: [
new HtmlWebpackPlugin({
title: 'My test'
})
]
}
此时我们删除index.html和bundle.js,webpack自动在build路径下创建这两个文件。
2. webpack-dev-server
我们可以使用webpack --wacth来监控代码,只要代码一修改,自动更新bundle.js,但是浏览器的网页还需要手动刷新。在开发工程中,非常的不方便。webpack-dev-server为我们解决了这个问题,它是一个小型服务器,在开发过程中可以实时刷新网页。
下面我们来安装配置webpack-dev-server。
1)全局安装webpack-dev-server
npm install webpack-dev-server -g
2)配置webpack-dev-server
// 添加devServer字段,其中字段变动比较大,配置时需要根据文档进行配置
devServer: {
historyApiFallback: true,
inline: true,
contentBase:'./build/',
port:'8086' // 我电脑上默认的8080端口无法访问,所以设置port为8086
},
3)设置运行快捷方式
在package.json中的scripts字段中添加下面一行,在命令行中输入npm run dev,直接启动webpack-dev-server,可以在指定端口进行访问。
"scripts": {
"dev": "webpack-dev-server"
},
3. 组件热加载(HMR)
我们在上述描述下,搭建的环境,每修改一次代码,页面都会整体刷新一次,我们更希望,页面局部刷新修改的组件。因此就有了组件热加载这个概念。我们可以直接安装babel-preset-react-hmre实现HMR。
npm install babel-preset-react-hmre --save-dev
.babelrc中的配置改为:
{
"presets": ["react", "es2015"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
并将启动命令改为:
"scripts": {
"dev": "webpack-dev-server --hot"
},
此时我们在命令行输入npm run dev,即可。
完成项目github地址:https://github.com/DiligentYe/react-webpack-env
react+webpack开发环境配置的更多相关文章
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- webpack开发环境配置和生产环境配置
开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...
- Mac电脑配置IOS React Native开发环境配置笔记
React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:不错的中文说明.官 ...
- vue2+webpack 开发环境配置
前提条件: 1.安装node.js https://nodejs.org/en/ 下载安装合适的平台 2.安装npm 第一步:初始化项目 新建文件夹 E:\app 推荐vue项目目录结构: confi ...
- React+webpack开发环境的搭建
首先创建项目,确保该项目已经安装了webpack和webpack-dev-server具体安装方法请参考上章所述. 在上一章说过babel是一个javascript编辑器,在react项目中使用bab ...
- vue2.0 + npm + webpack 开发===环境配置
cnpm安装:npm install -g cnpm --registry=http://registry.npm.taobao.org 1.安装vue-cli脚手架构建工具cnpm install ...
- VUE开发--环境配置(一)(转)
无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627 https://www.jianshu.com/p/a494417def99?utm_so ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境
转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...
随机推荐
- ODBC
ODBC是80年代末90年代初出现的技术,它为编写关系数据库的客户软件提供了统一的接口.ODBC只提供单一的API,可用于处理不同数据库的客户应用程序.使用ODBC API的应用程序可以与任何具有OD ...
- Wpf中鼠标样式的修改,作用点修改
最近,在做一个控件的鼠标样式,Ps加了插件,可以编辑生成.cur格式的图标. 可是,所有的改完以后,调试运行,结果发现自己制作的图标的作用点总是在左上角,而不是在"手形"图标的食指 ...
- block、inline、inline-block对比
display:block 1.block元素会独占一行,多个block元素会各种新起一行.默认情况下,block元素宽度自动填满其父元素容器: 2.block元素可以设置width和height属性 ...
- ABP文档 - Quartz 集成
文档目录 本节内容: 简介 安装 创建工作 调度工作 更多 简介 Quartz 是一个功能完整的开源工作调度系统,可用于最小的应用到一个大型的企业系统.Abp.Quartz 包简单地把Quartz集成 ...
- mysql常用语法
创建表 create table <表名>( <字段名> 类型(长度) not null primary key auto_increment, **主键 name char ...
- 剑指offer编程题Java实现——替换空格
题目描述 请实现一个函数,将一个字符串中的空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. package ...
- Omi命令行界面omi-cli发布
原文链接:https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi-cli.md 写在前面 通常认为,命令行界面(CLI)没有图 ...
- ios 相机调用之读取相册
UIIamgePickerControllerr可以从照片库中读取一张图片到咱们应用程序中来 步骤: //创建图片判断图片库是否可以使用 if([UIImagePickerControll ...
- Oracle排序分析函数
在Oracle自拓展SQL功能中,分析函数(Analytical Function)是非常强大的工具. 本篇我们介绍几个Oracle典型的排序分析函数,来帮助我们解决实际问题. 1.从rownum谈起 ...
- Visual Studio 2013 百度云下载地址
Visual Studio 2013 百度云下载地址 链接:http://pan.baidu.com/s/1sjFifox 密码: ipqe VS2013注册码:BWG7X-J98B3-W34RT-3 ...