Question

我们可以使用命令 create-react-app 从react项目开始。但是，当我们使用此命令时，我们并不了解如何使用webpack捆绑和打包所有类型的文件。

所以我尝试使用webpack 4和babel 7在没有 create-react-app 命令的情况下构建react应用，我成功了。

现在，我想使用包裹捆扎机进行相同的应用程序。当我在不同的博客上阅读时，我想到了一个简单的问题，那就是Web Pack，这实际上是零配置。

我的项目结构是

--cc

这是一个简单的项目，从包裹打包开始，所以我还没有添加redux或路由。

我想要实现的是

1）。就方面而言，应应用程序应使用包裹捆绑程序在浏览器中运行。

2）。我想在导入JS文件时使用绝对路径。

3）。要启用热重载。

Answer 1

在网上研究了几分钟后，我找到了解决方案，它实际上是使用包裹捆扎机的零配置。

我们只需要在package.json文件的脚本部分中添加2条命令即可。

项目结构为

- src
|- components
|- styles
|- index.html
|- index.js
|- App.js
- package.json
- .babelrc // this file will use to setup absolute path when import files

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from './App';
import "./style/index.scss";

ReactDOM.render(<App />, root);

index.html是与create-react-app相同的文件，只要我们只需要带id的div。

App.js

import React, { Component } from "react";
import Count from "@components/Count"; // here I used absolute path. check .bablerc file
export default class App extends Component {
    render() {
       return (
         <>
          <div>this is App component</div>
          <Count />
        </>
      );
 }
}

components / Count.js

import React, { Component } from "react";

export default class Test extends Component {
  constructor(props) {
   super(props);
   this.state = {
   count: 0
   };
  }

  render() {
    return (
      <>
       count is: {this.state.count}
      <br />
       <button onClick={(prevState) => {this.setState({
         count: prevState.count + 1
        });
      }}
    >
      Add count
      </button>
  </>
);
}
}

style / index.scss

body {
  background-color: red;
  color: #fff;
  text-align: center;
  font-size: 40px;
}

请注意，我们不需要手动安装node-sass软件包即可使用 scss。包裹将为您处理。

package.json

{
  "name": "react_parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel ./src/index.html",
    "build": "parcel build ./src/index.html/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {   
    "parcel-bundler": "^1.12.3",
  },
  "dependencies": {
  "react": "^16.8.6",
  "react-dom": "^16.8.6"
  }
}

.bablerc

{
  "plugins": [
    [
      "module-resolver",
     {
       "root": ["./src"],
       "alias": {
         "@components": "./src/components"
       }
     }
    ],
   ["react-hot-loader/babel"]
   ]
}

这里我们为components文件夹添加了别名，因此当我们需要从components文件夹导入任何文件时，我们不需要写相对路径。

npm run dev

您的服务器将在localhost：1234上启动

我解决了2个问题，但仍然需要弄清楚如何使用热重装，因此，如果您对热重装有任何想法，请回答。

用于生产版本： npm运行版本

使用包裹捆绑器而不是Webpack的React项目

1 个答案: