《React+Redux前端开发实战》—1.5.2 基于Webpack的Hello World

举报
华章计算机 发表于 2019/07/24 23:26:51 2019/07/24
【摘要】 本节书摘来自华章计算机《React+Redux前端开发实战》一书中的第1章,第1.5.2节,作者是徐顺发.

1.5.2  基于Webpack的Hello World

  真实项目中一般不会像1.5.1节介绍的这样来搭建项目,有了前面小节中的基础知识,接下来开始动手搭建一个基于Webpack的Hello World应用。这次搭建分为两部分:一部分是前期必要配置,另一部分是开发React代码。

  基于Webpack的React Hello World项目示例:

  1.前期必要配置

  (1)首先要确保读者的开发设备上已经安装过Node.js,新建一个项目:

  

  mkdir react-hello-world

  cd react-hello-world

  npm init -y

  

  (2)项目中使用的是Webpack 4.x,在项目根目录下执行如下命令:

  

  npm i webpack webpack-cli -D

注意:上面命令代码中npm install module_name -D 即 npm intsll module_name —save-dev。表示写入package.json的devDependencies。devDependencies里面的插件用于开发环境,不用于生产环境。npm install module_name —S即npm intsll module_name —save。dependencies是需要发布到生产环境的。

  (3)安装完Webpack,需要有一个配置文件让Webpack知道要做什么事,这个文件取名为webpack.config.js。

  

  touch webpack.config.js

  

  然后配置内容如下:

  

  var webpack = require('webpack');

  var path = require('path');

  var APP_DIR = path.resolve(__dirname, 'src');

  var BUILD_DIR = path.resolve(__dirname, 'build');

  var config = {

    entry: APP_DIR + '/index.jsx',                       // 入口

    output: {

      path: BUILD_DIR,                                                  // 出口路径

      filename: 'bundle.js'                                        // 出口文件名

    }

  };

  module.exports = config;

  

  这是Webpack使用中最简单的配置,只包含了打包的入口和出口。APP_DIR表示当前项目的入口路径,BUILD_DIR表示当前项目打包后的输出路径。

  (4)上面配置的入口需要新建一个应用的入口文件./src/index.jsx,我们让其打印Hello World:

  

  console.log('Hello World');

  

  (5)用终端在根目录下执行:

  

  ./node_modules/.bin/webpack -d

  

  上面的命令在开发环境运行之后,会在根目录下生成一个新的build文件夹,里面包含了Webpack打包的bundle.js文件。

  (6)接下来创建index.html,用于在浏览器中执行bundle.js :

  

  <!DOCTYPE html>

  <html>

  <head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <meta http-equiv="X-UA-Compatible" content="ie=edge">

      <title>Hello World</title>

  </head>

  <body>

      <div id="app"></div>

      <!--bundle.js是Webpack打包后生成的文件-->

      <script src="build/bundle.js" type="text/javascript"></script>

  </body>

  </html>

  在浏览器中打开index.html文件,在控制台就能看到./src/index.jsx打印的内容:Hello World 。

  (7)为了提高效率和使用最新的ES语法,通常使用JSX和ES 6进行开发。但JSX和ES 6语法在浏览器中还没有被完全支持,所以需要在Webpack中配置相应的loader模块来编译它们。只有这样,打包出来的bundle.js文件才能被浏览器识别和运行。

  接下来安装Babel:

  

  npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-react

注意:babel-core是调用Babel的API进行转码的包;babel-loader是执行转义的核心包;babel-preset-env是一个新的preset,可以根据配置的目标运行环境自动启用需要的Babel插件;babel-preset-react用于转译React的JSX语法。

  (8)在webpack.config.js中配置loader:

  

  var webpack = require("webpack");

  var path = require("path");

  var BUILD_DIR = path.resolve(__dirname, "build");   // 构建路径

  var APP_DIR = path.resolve(__dirname, "src");         // 项目路径

  var config = {

    entry: APP_DIR + "/index.jsx",                             // 项目入口

    output: {

      path: BUILD_DIR,                                                   // 输出路由

      filename: "bundle.js"                                              // 输出文件命名

    },

    module: {

      rules: [

        {

          test: /\.(js|jsx)$/,                         // 编译后缀为js和jsx格式文件

          exclude: /node_modules/,

          use: {

            loader: "babel-loader"                  // 使用babel-loader这个loader库

          }

        }

      ]

    }

  };

  module.exports = config;

  

  (9)创建.babelrc文件:

  

  touch .babelrc

  

  配置相应内容来告诉babel-loader使用ES 6和JSX插件:

  

  {

    "presets" : ["env", "react"]

  }

  

  至此为止,已经完成开发该项目的基础配置工作。

  2.使用React编码

  下面正式开始使用React来编写前端代码。

  (1)用NPM命令安装react和react-dom:

  

  npm install react react-dom -S

  

  (2)用下面代码替换./src/index.jsx中的console:

  

  import React from 'react';

  import { render } from 'react-dom';

  class App extends React.Component {

    render () {

      return <p> Hello React</p>;

    }

  }

  render(<App/>, document.getElementById('app'));

  

  (3)在根目录下执行:

  

  ./node_modules/.bin/webpack -d

  

  在浏览器中打开index.html,将会在页面展示Hello World。当然真实开发中不能每一次修改前端代码就执行一次Webpack编译打包,可以执行如下命令来监听文件变化:

  

  ./node_modules/.bin/webpack -d —-watch

  

  终端将会显示:

  

  myfirstapp Jack$ ./node_modules/.bin/webpack -d --watch

  webpack is watching the files…

  Hash: 6dbf97954b511aa86515

  Version: webpack 4.22.0

  Time: 839ms

  Built at: 2018-10-23 19:05:01

      Asset      Size  Chunks             Chunk Names

  bundle.js  1.87 MiB    main  [emitted]  main

  Entrypoint main = bundle.js

  [./src/index.jsx] 2.22 KiB {main} [built]

      + 11 hidden modules

  

  这就是Webpack的监听模式,一旦项目中的文件有改动,就会自动执行Webpack编译命令。不过浏览器上展示的HTML文件不会主动刷新,需要手动刷新浏览器。如果想实现浏览器自动刷新,可以使用react-hot-loader(源码地址https://github.com/gaearon/react- hot-loader)。

  (4)在真实的项目开发中,一般使用NPM执行./node_modules/.bin/webpack -d --watch命令来开发。这需要在package.json中进行如下配置:

  

  {

     ...

      "scripts": {

          "dev": "webpack -d --watch",

          "build": "webpack -p",

          "test": "echo \"Error: no test specified\" && exit 1"

    },

     ...

  }

  

  (5)现在只需要在根目录下执行如下命令就能开发与构建:

  

  npm run dev

  npm run build

  

  以上为真实项目中一个较为完整的项目结构,读者可以在此基础上根据项目需要自行拓展其他功能。本例源码地址为https://github.com/khno/react-hello-world,分支为master。项目完整的结构如下:

  

  .

  ├── build

  │   └── bundle.js

  ├── index.html

  ├── package-lock.json

  ├── package.json

  ├── src

  │   └── index.jsx

  ├── .gitignore

  ├── .babelrc

  └── webpack.config.js


【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。