使用 Webpack 部署到 Heroku

2020-11-09 08:00飞浪

介绍

Webpack是 JavaScript 应用程序中用于依赖项管理的工具。通过遍历应用程序中的所有导入，webpack 会创建一个依赖项图，其中包含应用程序所需的所有资产。然后，此依赖项图用于生成一个或多个称为包的文件。

WebPack 核心概念

入口

入口点指定了 webpack 在创建其内部依赖关系图时应从哪个模块开始。默认情况下，webpack 使用./src/index.js。

输出

输出指定 webpack 应使用哪个位置来发出包以及如何命名它们。默认情况下，webpack 使用./dist/main.js作为主输出文件，使用./dist文件夹作为其他生成的文件。

装载机

加载器是 webpack 允许开发人员打包除 JavaScript 和 JSON 之外的 Webpack 无法理解的文件的方式。

设置应用程序

为了继续，请确保您的计算机上安装了最新的nodeJS和npm 。

创建一个名为deploy-react-webpack 的新文件夹并导航到该文件夹。

      mkdir deploy-react-webpack
cd deploy-react-webpack
    

使用默认选项初始化项目。

      npm init -y

这将创建一个 package.json 文件。

安装所需的 ReactJs 包。

      npm i react react-dom

巴别塔 (Babel)

Babel将 ReactJs 中使用的 ES5 和 ES6 语法转换为旧版和新版浏览器都支持的向后兼容的 JavaScript 版本。

安装 Babel：

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

安装 webpack 和 webpack-cli：

      npm i -D  webpack webpack-cli webpack-dev-server

配置 Babel

在项目根目录创建一个名为.babelrc的新文件。

      touch .babelrc

将以下代码添加到文件中并保存。

      {
  "presets": [
      "@babel/preset-env","@babel/preset-react"
   ]
}
    

配置 Webpack

在项目根目录创建一个名为webpack.config.js的新文件。

添加用于处理 HTML 的组件

      npm i html-webpack-plugin html-loader --save-dev

      touch webpack.config.js

添加以下代码。

      const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        })
    ]
};
    

条目告诉 webpack 在打包应用程序时从哪里开始。测试规则指定了可以使用babel-loader的文件扩展名，同时排除node_modules中的文件。

创建 React 应用

在此阶段，您将创建用户可以与之交互的实际 React 应用程序。

在src内创建index.html。

      mkdir src
cd src
touch index.html
    

将以下代码添加到index.html。

      <html lang="en">
<head>
    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>How To Deploy React Js With Babel On Heroku</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
    

在src中，创建一个名为index.js的文件。

      touch index.js

添加以下代码。

      import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
    render(){
        return(
            <div>
                Hello World !
            </div>
        )
    }
}
ReactDOM.render(<App/>, document.getElementById("root"));
    

这将创建一个简单的 React hello world 组件。

在您的 package.json 中替换以下代码。

      "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},
    

和

      "scripts": {
    "dev": "webpack serve",
    "start": "node server.js",
    "build": "webpack --mode production"
  },
    

dev命令用于在开发模式下运行应用程序。start命令由Heroku用于在生产环境中提供文件。

你的 package.json 应该看起来像这样。

      {
  "name": "deploy-react-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve",
    "start": "node server.js",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "@webpack-cli/serve": "^1.0.1",
    "babel-loader": "^8.1.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}
    

<div class="title aem-GridColumn--tablet--12 aem-GridColumn--phone--12 aem-GridCo

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光24319浏览1318