WEB前端使用 webpack + reack 搭建框架 01 基础框架

来源：互联网发布：packageinfo.java作用编辑：程序博客网时间：2024/05/29 12:49

最近项目有可能会有道react，所以提前研究了一下react，其中遇到很多问题，把过程记录下来希望对跟我一样的新手有一些帮助。
首先我们用到react框架，react框架中支持ES6以及JSX语法，但是目前的浏览器对ES6的支持程度不一样，所以需要将ES6及JSX转化为ES5然后才能让浏览器识别，这个转化过程我们就用到了babel。webpack是一个模块打包器（功能很强大，我们暂时只使用比较简单的功能），可以将多个模块打包到一块。

PS：以下皆为windows平台。

1.首先我们要安装node.js

可以到官网下载，点击下载。使用命令 node -v 可以查看版本号：
这里写图片描述

2.创建项目结构

首先创建项目文件夹 react-learn ,然后在项目内分别创建 app、public 两个文件夹，app用于存放书写的源码，public用于存放编译后的代码。我们得到如下的结构：

3. 生成package.json并安装依赖

在项目目录打开命令工具执行npm init，然后一直回车就可以了，你可以使用npm init --yes快速生成

PS：我们并不会把我们的代码上传的node供其他人使用，所以对package.json的内容不必十分关心。

首先安装webapck
PS：如果觉得npm比较慢，可以使用淘宝镜像 cnpm，只需将下面的命令中的npm替换为cnpm即可。

-- 将webpack全局安装npm install -g webpack -- 将webpack安装到项目并写入开发依赖中npm install --save-dev webpack

我们还用到的依赖有：
babel-core（babel 核心功能）
babel-loader（webpack使用loader调用babel节本处理文件）
babel-preset-es2015（babel处理ES6套件）
babel-preset-react（babel处理react套件）babel处理react套件
react（react核心）react核心
react-dom（react处理DOM相关）
我们可以使用下面的命令将这些依赖全部增加到项目中：

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom

然后我们的package.json文件应该是这个样式的：

{  "name": "react-learn",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "babel-core": "^6.25.0",    "babel-loader": "^7.1.1",    "babel-preset-es2015": "^6.24.1",    "babel-preset-react": "^6.24.1",    "react": "^15.6.1",    "react-dom": "^15.6.1",    "webpack": "^3.0.0"  }}

4. 书写react的js文件

我们在app/js文件夹下增加test.js,内容为：

import React from "react";class Test extends React.Component {  constructor(props) {    super(props);  }  render() {    return <div>Hello,World!</div>  }}export default Test;

然后在app/js文件夹下增加main.js,作为整个项目唯一的入口（最上层，该JS里不定义任何组件，为后期热加载做铺垫），内容为：

import React from "react";import {  render} from "react-dom";import Test from './test.js';render(<Test />, document.getElementById('root'));

这时我们的目录结构为：

这里写图片描述

5.配置webpack将两个文件打包为一个js

在项目根目录增加webpack.config.js ,内容为：

module.exports = {  devtool: 'eval-source-map', //配置生成Source Maps，选择合适的选项  entry: __dirname + "/app/js/main.js", //已多次提及的唯一入口文件  output: {    path: __dirname + "/public/js", //打包后的文件存放的地方    filename: "bundle.js" //打包后输出文件的文件名  },  module: {    loaders: [{      test: /\.js$/,      exclude: /node_modules/,      loader: 'babel-loader'    }]  }}

其中：
devtool：为配置生成Source Maps（使调试更容易），这里不进行叙述。
entry：指定入口文件
output：指定最终输出的文件，我们这里输出到public/js/bundle.js
loaders: 配置要使用的loaders 我们这里使用的babel-loader

PS：__dirname为node全局变量，指向当前文件目录。同时指定loader时不可以省略后面的-loader必须写全babel-loader（老版本可以只写babel）

在项目根目录增加.babelrc配置文件，内容为：

{    //需要用到的套件    "presets": ["es2015",'react'],    //需要用到的插件    "plugins": []}

PS：window下无法创建名称为.babelrc的文件，使用sublime可以创建。(你也可以尝试其他的IDE)webpack在使用babel时会自动调用他的配置文件，当然这一块也可以在webpack的配置文件中进行设置，我个人还是把这一块拿出来看起来比较清晰。

这是我们的项目结构为：

这里写图片描述

现在，我们执行命令webapck将两个源文件进行打包：

这里写图片描述

可以看到打包成功，在public下增加了js文件夹，里面有一个文件bundle.js

现在项目目录为：
这里写图片描述

6.书写HTML展示页面

在public文件夹下增加index.html，内容为：

<!DOCTYPE HTML><html lang="zh-CN"><head>  <meta charset="UTF-8"></head><body>  <div id="root"></div>  <script src="js/bundle.js"></script></body></html>

使用浏览器打开可以看到页面：
这里写图片描述

PS：使用谷歌浏览器有时会因为无法访问本地文件报错，可以在启动时增加命令参数–allow-file-access-from-files

我们可以使用 webpack -w 命令来监听文件的变化，然后手动刷新页面查看。当然，我们后续还有更好的解决办法。

参考文章：
http://www.jianshu.com/p/42e11515c10f

阅读全文

0 0