从webpack开始创建一个新的react项目

最新推荐文章于 2024-08-27 16:06:51 发布

我今年六岁

最新推荐文章于 2024-08-27 16:06:51 发布

阅读量223

点赞数

分类专栏： React 前端笔记文章标签： react

本文链接：https://blog.csdn.net/poppy995/article/details/109506067

版权

前端笔记同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

React

2 篇文章 0 订阅

订阅专栏

使用npm init -y 初始化一个package.json
创建src文件夹（项目文件）和text文件夹（测试代码等）
src中创建index.html以及index.js
安装webpack
```
cnpm i webpack webpack-cli -D
```

创建webpack.config.js

写入

module.exports = {

 mode: "development", //可选的值为：`development` 和 `production`

 // webpack4.x中约定了打包的入口时候src -> index.js 出口是 dist -> main.js

};

安装webpack-dev-server->实时编译

cnpm i webpack-dev-server -D

在package.json中添加

"scripts": {
 	 ...

 	 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 4500 --hot --compress"

 },

就可以使用npm run dev 跑起项目

给项目生成的内存中添加一个首页，不然一进去看到的是项目的目录结构，安装html-webpack-plugin

cnpm i html-webpack-plugin -D

在webpack.config.js中写入

const path = require("path");

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

const htmlplugin = new HtmlPlugin({

 template: path.join(__dirname, "./src/index.html"), //指定模板文件

 filename: "index.html", // 指定内存中生成的首页名称

});

module.exports = {

 mode: "development",

 // webpack4.x中约定了打包的入口时候src -> index.js 出口是 dist -> main.js

 plugins: [htmlplugin],

};

安装静态文件处理的loader

npm i url-loader file-loader -D

在webpack.config.js中写入

module.exports = {
  ...
  module: {
    rules: [
      ....
      { test: /\.jpg|png|gif|bmp$/, use: "url-loader" }, //处理图片
      { test: /\.ttf|svg|woff|woff2$/, use: "url-loader" }, //处理字体文件
    ],
  },
};

安装样式的处理loader

cnpm i style-loader css-loader -D
cnpm i sass-loader node-sass -D

在webpack.config.js中写入

module.exports = {
  ...
  module: {
    rules: [
      ....
      { test: /\.css$/, use: ["style-loader", "css-loader"] }, //处理普通样式表
      { test: /\.scss$/, use: ["style-loader", "css-loader?modules&localIdentName=[path][name]-[local]-[hashL:5]","sass-loader"] }, //处理普通样式表
    ],
  },
};

安装babel插件

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D

安装能够识别转换jsx语法的包

cnpm i babel-preset-react -D

创建.babelrc文件，并添加

{
    "presets": [
        "env",
        "stage-0",
        "react"
    ],
    "plugins": [
        "transform-runtime"
    ]
}

添加babel-loader配置项，在webpack.config.js中写入

module: { //要打包的第三方模块
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}

配置一些可以省略的后缀以及别名

resolve: {
    extensions: [".js", ".jsx", ".json"],
    alias: {
      //别名-可以在文件中用@符号代表这个路径
      "@": path.join(__dirname, "./src"),
    },
  },

安装react
```
cnpm i react react-dom -S
```

在index.js中写入

import React from "react";
import ReactDOM from "react-dom";

// 导入根组件
import App from "@/components/App";

// 调用方法渲染根组件
ReactDOM.render(
  <div>
    <App></App>
  </div>,
  document.getElementById("app")
);

创建App.jsx

import React, { Component } from "react";

export default class App extends Component {
  render() {
    return <div>App</div>;
  }
}

在index.html中写入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>