Webpack+React+ES6+JSX+CSS实例

最新推荐文章于 2020-07-29 22:40:31 发布

总耳凡工

最新推荐文章于 2020-07-29 22:40:31 发布

阅读量1.5k

点赞数

分类专栏：前端技术文章标签： react-es6 webpack

本文链接：https://blog.csdn.net/kepus/article/details/78828869

版权

前端技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Webpack+React+ES6+JSX+CSS实例

Demo为如何使用ES6、JSX写React组件，并在组件中引用CSS样式，最终通过webpack打包。

前置：环境已安装Nodejs和npm
任意路径下的Demo文件夹下开始

1.npm生成package.json文件

D:\Demo>npm init -y
Wrote to D:\Demo\package.json:
{
  "name": "Demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2.安装npm包

2.1 安装react

D:\Demo>npm install react@~16.2.0 react-dom@~16.2.0 --save

2.2 安装babel及jsx、es6、css加载器

D:\Demo>npm install babel-core@~6.26.0 babel-loader@~7.1.2 --save
D:\Demo>npm install babel-preset-env@~1.7.0 babel-preset-react@~6.24.0 --save
D:\Demo>npm install  style-loader@~0.19.1 css-loader@~0.28.7 --save

2.3 安装browser-syn

D:\Demo>npm install browser-sync@~2.26.7 --save

2.4 安装webpack

D:\Demo>npm install webpack@~4.0.0 --save
D:\Demo>npm install webpack-cli@~3.3.6 --save

2.5 配置webpack（新建webpack.config.js）

const path = require("path")
module.exports = {
    mode: "development",
    entry: './main.js',
    output: {
        path: path.resolve(__dirname),
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: '/node_modules/',
                query: {
                    presets: ['env', 'react']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
                exclude: '/node_modules/',
            }
        ]
    }
}

3.全部代码

在这里插入图片描述

Demo的配置文件有：
package.json — npm配置文件
webpack.config.js — webpack配置文件
Demo的代码文件有:
index.html — 首页
index.js — 首页直接引用的js,也是webpack打包生成的文件
main.js — webpack打包入口文件
frame.js — react组件文件
frame.css — react组件的样式文件

3.1 package.json(执行完1、2步会自动生成，然后添加webpack、server脚本即可)

{
  "name": "Demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack --watch",
    "server": "browser-sync --port 4144 start --server --files \"**/*.html\" \"**/*.css\" \"**/*.js\" "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "browser-sync": "^2.26.7",
    "css-loader": "^0.28.11",
    "react": "^16.2.0",
    "react-dom": "^16.2.1",
    "style-loader": "^0.19.1",
    "webpack": "^4.0.1",
    "webpack-cli": "^3.3.6"
  }
}

3.2 webpack.config.js(2.5已给出)
3.3 index.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<title>demo</title>
	<style>
		body{
			padding:0px;
			margin: 0px;
		}
	</style>
</head>
<body id="index">
	<script type="text/javascript" src="./index.js"></script>
</body>
</html>

3.4 index.js(执行webpack命令自动生成)
3.5 main.js

import React from 'react';
import ReactDOM from 'react-dom';
import IndexFrame from './frame.js';
ReactDOM.render(<IndexFrame/>,document.getElementById('index'));

3.6 frame.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import './frame.css';

class IndexFrame extends Component{
    render(){
        return (
            <div className='styFrame'>
                <header className='styHeader'>
                    header
                </header>
                <aside className='styAside'>
                    left menu
                </aside>
                <div className='styMain'>
                    main content
                </div>
                <footer className='styFooter'>
                    foot
                </footer>
            </div>
        );
    }
}
export default IndexFrame;

3.7 frame.css

.styFrame{
    background-color: white;
    margin: 0;
    padding: 0;
}
.styHeader{
    position: fixed;
    left: 0px;
    right: 0px;
    background-color: greenyellow;
    height: 80px;
}
.styAside{
    position: fixed;
    top: 80px;
    background-color: rgb(74, 125, 141);
    width: 210px;
    height: 100%;
    z-index: 1001;
}
.styMain{
    background-color: gray;
    right: 0px;
    margin-left: 210px;
    padding-top: 80px;
}
.styFooter{
    background-color: pink;
    height: 30px;
    text-align: center;
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: -1;
}