一环境安装

我们需要用到 webpack 打包工具将我们前端代码进入依赖构建，压缩打包等以减少我们发布的静态资源文件个数，减少网络请求，提高前端的用户体验。

所以需要安装 node 环境，借用 node 自带的 npm 包管理工具安装 webpack 打包工具。

node 相当于 JAVA 的运行环境 jdk，npm 相当于 JAVA 的仓库管理工具 maven，只是 node 自带了 npm，maven 还需要再次安装。

二初始化项目

cd /aaa/bbb/cccmkdir first-reactcd 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文件，内容如下

// 配置webpackmodule.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 的基本使用。

react基础入门：(三)初始化React+webpack项目

一 环境安装

二 初始化项目

三 初始化文件

四 启动项目

五 总结

一环境安装

二初始化项目

三初始化文件

四启动项目

五总结