react基础入门：(三)初始化React+webpack项目
2019-01-17 本文已影响124人
8b6370ea271c
原文链接：react基础入门：(三)初始化React+webpack项目
一 环境安装
我们需要用到 webpack 打包工具将我们前端代码进入依赖构建，压缩打包等以减少我们发布的静态资源文件个数，减少网络请求，提高前端的用户体验。
所以需要安装 node 环境，借用 node 自带的 npm 包管理工具安装 webpack 打包工具。
node 相当于 JAVA 的运行环境 jdk，npm 相当于 JAVA 的仓库管理工具 maven，只是 node 自带了 npm，maven 还需要再次安装。
二 初始化项目
cd /aaa/bbb/ccc
mkdir first-react
cd first-react
// 初始化一个 node 项目，一路回车健
npm init
三 初始化文件
- 编辑 package.json 文件，内容为下
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "qbian",
"license": "ISC",
"dependencies": {
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.2",
"react-dom": "^16.3.2"
},
"devDependencies": {
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4"
}
}
- 创建webpack.config.js文件，内容如下
// 配置webpack
module.exports = {
mode: 'development', // development production
entry: './main.js', // 入口文件路径
output: {
path: '/',
filename: 'index.js' // 打包后输出的压缩文件名，html 内引入的文件 && package.json 中写的入口文件
},
devServer: {
inline: true,
port: 3333
},
module: {
rules: [{
test: /\.js$/, // babel 转换为兼容性的 es5
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'latest']
}
}]
}
};
- 创建html模版文件 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first-react-webpack</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
- 创建 main.js 文件，内容如下
// main.js 即项目入口文件
import React from 'react';
import RctDOM from 'react-dom';
import App from './App';
RctDOM.render(<App />, document.getElementById('app'));
- 创建 App.js 文件，内容如下
// App.js 即 React 组件主文件
import React from 'react';
class App extends React.Component {
render() {
return <div>Hello react-webpack .</div>;
}
}
export default App;
- 最后的项目目录结构如下
/node_modules/
/App.js
/index.html
/main.js
/package-lock.json
/package.json
/webpack.config.js
四 启动项目
- 执行以下命令下载 package.json 中指定的第三方包
npm install
- 执行以下 package.json 中配置的启动命令启动项目
npm start
访问 http://localhost:3333/ 即可。
五 总结
前端项目的打包工具有很多，我们这里用的是 webpack，也是前端使用最广泛的。这里只是 webpack 最基本的配置，把我们接下来要用到的简单的配置了下。
下面我们将介绍 react 的基本使用。
扫码关注有惊喜
