初始化
创建完项目目录
通过运行npm init 进行初始化
安装依赖
安装需要的依赖和模块
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
解释一下这些依赖包以及模块
-
因为我们要使用 React, 所以我们需要先安装react和react-dom这两个依赖包，–save 命令用于将包添加至 package.json 文件的dependencies中
-
我们也要安装一些 babel 插件，–save-dev是将插件添加到devDependencies中
babel-loader用于转换ES6语法
babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的
babel-preset-react 用于解析jsx的包
babel-preset-es2015 解析es2015的包,智能识别当前运行环境并进行转换（截至Babel v6，所有年度预设均已弃用，建议改用babel-preset-env） -
安装webpack以及webpack-dev-server依赖
webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器
webpack 基础依赖包
webpack-cli ：webpack脚手架，没有安装的话run build的时候有可能会提示安装（npm install webpack-cli -D）
源代码编写
// App.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Hello,react!</h1>
</div>
);
}
}
export default App;
// App.js
// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
配置webpack
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
}
}
完成后保存，运行npm run dev（记得在package.json中添加命令）或者npm run build后打开index.html，结果如下：
本次学习和练习告一段落~~~
448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
