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

最新推荐文章于 2024-08-12 19:01:02 发布

土豆丿大侠

最新推荐文章于 2024-08-12 19:01:02 发布

阅读量892

点赞数

本文链接：https://blog.csdn.net/maxzhaobing/article/details/74002211

版权

web前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

webpack

2 篇文章 0 订阅

订阅专栏

reack

2 篇文章 0 订阅

订阅专栏

最近项目有可能会有道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>