这篇内容重点介绍一个React项目的结构目录以及webpack的配置，启动webpack-dev-server并用React方式输出HelloWorld。本教程理念就是让大家不仅会用React,而且要明白为什么要这样用。
开发环境
创建项目目录
npm初始化package.json
➜ mkdir kas-react-redux #新建项目文件夹
➜ cd kas-react-redux #进入
➜ npm init #初始化package.json
name: (kas-react-redux)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: Asir
license: (ISC)
根据提示输入内容，也可以直接回车，然后在package.json文件中修改
安装React，我们要学习的基础框架
➜ npm install --save react react-dom
├── react@15.4.2
├── react-dom@15.4.2
安装webpack和webpack-dev-server
➜ npm install --save webpack webpack-dev-server
├── webpack@2.3.2 #用于将代码整体打包压缩输出的工具
├── webpack-dev-server@2.4.2 #用于开发模式代码调试与热更新
安装配置webpack用到的库
- babel相关的库，用来打包编译转换为目前主流浏览器支持的JS语法
➜ npm install --save-dev babel babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-3
├── babel@6.23.0
├── babel-loader@6.4.1
├── babel-preset-es2015@6.24.0 #打包编译ES6转ES5的库
├── babel-preset-react@6.23.0 #打包编译jsx语法
├── babel-preset-stage-3@6.22.0 #打包编译async|await语法
- style相关库，用来打包css，编译less、sass
➜ npm install --save-dev style-loader css-loader less-loader sass-loader less node-sass
├── style-loader@0.16.1
├── css-loader@0.27.3
├── less-loader@4.0.2
├── sass-loader@6.0.3
├── less@2.7.2
├── node-sass@4.5.1
- path 用于拼接路径
➜ npm install --save-dev path
├── path@0.12.7
- html-webpack-plugin 模板插件用于导出html时，可以使用模板
➜ npm install --save-dev html-webpack-plugin
├── html-webpack-plugin@2.28.0
创建并配置webpack.config.js
➜ atom webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports= {
entry: path.resolve(APP_PATH, 'index.jsx'),
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
//babel重要的loader在这里
module: {
rules: [
{
test: /\.(less|scss|css)$/,
loaders: ['css-loader', 'sass-loader', 'less-loader']
},
{
test: /\.jsx?$/,
loader: "babel-loader",
include: APP_PATH,
}
]
},
devtool: 'eval-source-map', //开发环境
devServer: {
compress: true, // 启用Gzip压缩
historyApiFallback: true, // 为404页启用多个路径
hot: true, // 模块热更新，配置HotModuleReplacementPlugin
https: false, // 适用于ssl安全证书网站
noInfo: true, // 只在热加载错误和警告
// ...
},
plugins: [
new HtmlwebpackPlugin({
title: '记账本',
template: 'build/template/index.html'
})
],
}
创建.babelrc,用于babel调用的插件配置
➜ atom .babelrc
{
"presets": ["es2015","react", "stage-3"]
}
最终构建好的目录
kas-react-redux
├── build
├── node_modules
├── src
├── test
├── .babelrc
├── package.json
├── webpack.config.js
使用React
用react写一个HelloWorld页面
➜ cd src & atom index.jsx
import React from 'react'
import { render } from 'react-dom'
const app = document.createElement('div')
document.body.appendChild(app)
render(<h1>Hello, world!</h1>, app)
在package.json中添加
"scripts": {
"start": "webpack-dev-server --hot --inline --port 8080 --host 192.168.31.182", #添加项
"test": "echo \"Error: no test specified\" && exit 1"
},
现在启动webpack-dev-server, 可以在浏览器中看到，输出的HelloWorld页
➜ npm start
结束
本节内容重点介绍了webpack配置与react项目目录的构建，下一节将讲解在React中引入Redux库，并构建src的目录结构。
App下载体验
- android
-
ios 由于诸多限制暂未上线
logo
微信每周一篇写作践行群
每周一篇写作践行群自愿加入，入群即表示同意一起写作一起成长，大家互相赞赏鼓励！
