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;
}
4.运行查看
4.1在Demo文件夹下打开2个cmd命令框,分别执行npm run webpack和npm run server
4.2 浏览器 http://localhost:4144/ 查看