通过Webpack入门React——全面指南

2024-01-12 01:32:39

如何通过Webpack入门React #

作为CSS模块化系列文章的最后一篇，我将探索如何通过Webpack来构建一个静态React网站。这个网站将包含两个页面：一个主页和一个包含多个React组件的页面。我们来看看它们是如何工作的。

在之前的文章中，我们使用Webpack快速搭建了一个项目，展示了所有依赖是如何导入到一个JavaScript文件中。

快速入门：使用Webpack搭建React项目

安装必要的工具。
- Node.js
- npm
- Webpack
- React
- Babel
创建项目文件夹并初始化npm。
安装Webpack及其相关的加载器和插件。

配置Webpack。

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

创建入口文件index.js。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, World!</h1>;
};

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

运行Webpack来构建项目。
```
webpack
```
将构建后的文件复制到web服务器。

创建React应用的静态版本

主页

创建主页的React组件。

// src/components/Home.jsx
import React from 'react';

const Home = () => {
  return <h1>Home Page</h1>;
};

export default Home;

在入口文件index.js中导入组件。

// src/index.js
import Home from './components/Home';
...
ReactDOM.render(<Home />, document.getElementById('root'));

页面与组件

创建包含多个组件的页面。

// src/pages/PageWithComponents.jsx
import React from 'react';
import ComponentA from '../components/ComponentA';
import ComponentB from '../components/ComponentB';

const PageWithComponents = () => {
  return (
    <>
      <ComponentA />
      <ComponentB />
    </>
  );
};

export default PageWithComponents;

在入口文件index.js中导入页面。

// src/index.js
import PageWithComponents from './pages/PageWithComponents';
...
ReactDOM.render(<PageWithComponents />, document.getElementById('root'));

CSS模块化

安装CSS模块化所需的工具。
- postcss-loader
- css-loader

配置Webpack。

// webpack.config.js
module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: 'style-loader!css-loader?modules'
      }
    ]
  }
};

创建CSS模块。

// src/styles/home.module.css
.home {
  color: red;
}

在React组件中导入并使用CSS模块。

// src/components/Home.jsx
import React from 'react';
import styles from './home.module.css';

const Home = () => {
  return <h1 className={styles.home}>Home Page</h1>;
};

export default Home;