从零开始手动搭建webpack+react项目

最新推荐文章于 2024-04-08 22:23:48 发布

风风草

最新推荐文章于 2024-04-08 22:23:48 发布

阅读量354

点赞数

分类专栏： webpack react 文章标签： webpack react

本文链接：https://blog.csdn.net/u011523953/article/details/109426785

版权

react 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

webpack

6 篇文章 0 订阅

订阅专栏

1、项目初始化

新建一个项目文件夹my-app
在该文件夹中使用 npm init命令生成 package.json文件

2、安装需要的依赖

安装React

npm install --save react

安装React Dom

npm install --save react-dom

安装webpack打包工具

npm install --save-dev webpack

使用 webpack 4+ 版本，还需要安装 webpack-cli

npm install --save-dev webpack-cli

安装webpack-dev-server，一个小型express服务器，主要特性是支持热加载

npm install --save-dev webpack-dev-server

webpack需要两个额外的组件来处理HTML：html-webpack-plugin和html-loader

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

3、修改 package.json 文件的内容

与webpack有关(配置端口、热加载、ip、mode等）

"scripts": {
    "start": "webpack-dev-server --hot --open --host 127.0.0.1 --post 8888 --mode development",
    "build": "webpack --mode production"
},

4、安装babel

babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行

npm install --save-dev @babel/core

webpack并不知道如何将ES6语法转换为ES5，不过 webpack 可以使用 loader 来完成。即webpack加载器将一些东西作为输入，并将其转换为其他东西输出

npm install --save-dev babel-loader

将ES6语法转码为ES5

npm install --save-dev @babel/preset-env

将JSX语法转化为JavaScript

npm install --save-dev @babel/preset-react

5、安装加载器

css加载器

npm install style-loader css-loader -D

less加载器

npm i less-loader less -D

6、新建一个 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',
          },
        ],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),
  ],
}

7、新建一个配置文件`.babelrc`

写入以下内容

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

至此，环境基本已经配置完成。接下来编写react组件

8、在根目录下新建一个 index.html

写入以下内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>new react project</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

9、新建一个 src 文件夹

在src文件夹下新建一个 index.js 写入以下内容

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

10、打包、运行

运行npm start即可在浏览器中访问页面127.0.0.1:8888/
运行npm run build时，会出现一个dist文件夹，文件夹中包含有一个html和一个js文件，即为打包后的文件

风风草

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
从零开始手动搭建webpack+react项目

基本步骤：1、使用 npm init命令生成 package.json 文件2、安装需要的依赖安装Reactnpm install --save react安装React Domnpm install --save react-dom 安装webpack打包工具npm install --save-dev webpack 使用 webpack 4+ 版本，还需要安装 webpack-clinpm install --save-dev webpack-cli
复制链接

扫一扫