美文网首页
React基础篇(三)之 webpack打包项目配制

React基础篇(三)之 webpack打包项目配制

作者: 早起的年轻人 | 来源:发表于2020-02-12 20:27 被阅读0次

    1、本篇章配置一个 webpack 打包项目
    2、简述 jsx 语法配置支持

    1 初始化项目

    使用 IDE 打开目录
    在命令行中初化化项目

     npm init -y
    

    然后安装 webpack

     cnpm i webpack -D
    

    然后安装 webpack-cli

    webpack-cli 用来执行webpack相关命令

     cnpm i webpack-cli -D
    

    创建 源代码src目录、打包输出目录 dist目录
    然后在 src 目录中

    创建 index.js 文件 目前是一个空的 js 文件

    创建 index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>首页面</title>
    </head>
    <body>
    
    </body>
    </html>
    

    创建 webpack的配制文件webpack.config.js

    module.exports = {
      mode: 'development',// production development
    };
    
    

    目前项目目录如下:


    image

    然后在命令行中执行 webpack 打包项目


    在这里插入图片描述

    打包完成后,在dist 目录下就生成了打包后的 main.js 文件

    然后配制 webpack-dev-server

    cnpm i webpack-dev-server -D
    
    在这里插入图片描述

    然后配制 package.json

    {
      "name": "demo2",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        // --open 打包完成后 在浏览器中打开
        "dev": "webpack-dev-server --open --port 8080 --hot --progress --compress"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.4.1",
        "webpack-cli": "^3.3.10"
      }
    }
    
    

    然后命令行执行

    npm run dev 
    
    在这里插入图片描述

    然后配制

    npm i html-webpack-plugin -D
    

    在 webpack.config.js 中

    
    
    const path = require('path');
    //导入插件
    const  HtmlWebPackPlugin = require('html-webpack-plugin');
    //创建插件
    const  htmlPlugin = new HtmlWebPackPlugin({
      template:path.join(__dirname,'./src/index.html'),//源文件
      filename: 'index.html' //生成内存中首页面的名称
    });
    
    
    //Node.js 两种导出模块的方式:module.exports和exports
    //module和exports是Node.js给每个js文件内置的两个对象
    module.exports = {
      mode: 'development',// production development
      //引用插件
      plugins: [
          htmlPlugin
      ]
    };
    
    

    然后再次运行

    npm run dev 
    

    在浏览器中


    在这里插入图片描述

    2 在项目中使用 React

    2.1 安装 react

     cnpm i react react-dom -s
    
    • react 专门用于创建组件和虚拟DOM,同时组件的生命周期都在这个包中
    • react-dom 专门进行DOM操作的,最主要的应用场景就是 ReactDom.render()

    2.2 在 index.html 中创建容器

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>首页面</title>
    </head>
    <body>
    <!--容器, 使用React 创建的虚拟DOM元素,都会被渲染到这个指定的容器中-->
    <div id="app"></div>
    </body>
    </html>
    
    

    2.3 在 index.js 中使用 react

    //第一步 导入依赖
    //这两个导入进,接收的成员变量名称必须这样写
    
    //用来创建组件、虚拟DOM元素 生命周期
    import React from 'react';
    //所创建好的组件和虚拟DOM放到页面上展示
    import ReactDOM from 'react-dom';
    
    
    //第二步 创建 虚拟DOM 元素
    //参数一 创建元素的类型,字符串,表示元素的名称
    //参数二 是一个对象或null 表示当前这个 DOM元素的属性
    //参数三 子节点
    
    // 这里创建的DOM元素等效于 <h1 id="hx1" title="这是title">
    const elementH1 = React.createElement('h1', {id: 'hx1', title: '这是title'}, '这是一个H1标签');
    
    
    //第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
    // 参数一 要渲染的虚拟DOM元素
    // 参数二 指定页面上的容器
    ReactDOM.render(elementH1, document.getElementById('app'));
    
    

    然后 运行项目

    npm run dev 
    
    在这里插入图片描述

    在上述代码中我们使用的是 React.createElement 来创建的DOM元素,这种在实际开发中不太适用

    在 js 文件中默认不可以书写 类似于 HTML 这样的标记语言,否则会打包失败,如果需要这样写,可以使用 babel 来转换

    在 JS 中混合写入类似于 HTML 的语法,叫做 JSX 语法,符合 XML 的 JS

    启用 JSX 语法,运行安装 babel 插件

     cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
    
     cnpm i babel-preset-env babel-preset-stage-0 -D
    

    安装能够识别转换 jsx 语法的包

    cnpm i babel-preset-react -D
    

    添加 .babelrc 配置文件,在项目跟目录下创建 .babelrc 文件

    
    {
      "presets": ["env","stage-0","react"],
      "plugins": ["transform-runtime"]
    }
    
    

    在 webpack.config.js 中配置 匹配规则

    
    const path = require('path');
    //导入插件
    const  HtmlWebPackPlugin = require('html-webpack-plugin');
    //创建插件
    const  htmlPlugin = new HtmlWebPackPlugin({
      template:path.join(__dirname,'./src/index.html'),//源文件
      filename: 'index.html' //生成内存中首页面的名称
    });
    
    
    //Node.js 两种导出模块的方式:module.exports和exports
    //module和exports是Node.js给每个js文件内置的两个对象
    //webpack 默认只能打包处理 .js 后缀名类型的文件
    module.exports = {
      mode: 'development',// production development
      //引用插件
      plugins: [
          htmlPlugin
      ],
      //所有的第三方模块的配置规则
      module: {
        //匹配规则
        rules: [
          {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
        ]
    
      }
    };
    
    

    然后在 index.js 文件中我们使用 jsx语法

    //第一步 导入依赖
    //这两个导入进,接收的成员变量名称必须这样写
    
    //用来创建组件、虚拟DOM元素 生命周期
    import React from 'react';
    //所创建好的组件和虚拟DOM放到页面上展示
    import ReactDOM from 'react-dom';
    
    
    //第二步 创建 虚拟DOM 元素
    //参数一 创建元素的类型,字符串,表示元素的名称
    //参数二 是一个对象或null 表示当前这个 DOM元素的属性
    //参数三 子节点
    
    
    //在JS 文件中 HTML 这样的标记语法 为 jsx 语法
    const elementDiv = <div id="mydiv" title="div"> 这是一个 DIV </div>
    
    // 这里创建的DOM元素等效于 <h1 id="hx1" title="这是title">
    const elementH1 = React.createElement('div', {id: 'hx1', title: '这是title'}, '这是一个父div标签',elementDiv);
    
    
    
    
    
    //第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
    // 参数一 要渲染的虚拟DOM元素
    // 参数二 指定页面上的容器
    ReactDOM.render(elementH1, document.getElementById('app'));
    
    

    然后运行

    npm run dev 
    

    浏览器中


    在这里插入图片描述

    相关文章

      网友评论

          本文标题:React基础篇(三)之 webpack打包项目配制

          本文链接:https://www.haomeiwen.com/subject/ibzcfhtx.html