从0构建一个项目（react）

最新推荐文章于 2024-05-09 18:14:19 发布

Dark_programmer

最新推荐文章于 2024-05-09 18:14:19 发布

阅读量156

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/Dark_programmer/article/details/109704742

版权

从0到1 使用webpack创建项目

一、创建项目并初始化
二、安装react, react-dom, webpack
三、创建目录文件

一、创建项目并初始化

在这里，我创建的项目叫 webpackBuild，然后在当前目录下打开终端，输入以下指令初始化项目:

	npm init

在这里插入图片描述

这是在init过程中的一些内容，可自行修改。
创建完成之后，会出现一个 package.json文件，这是项目的核心文件，包含包依赖管理和脚本任务

二、安装react, react-dom, webpack

react : react的顶级库
react-dom : 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
webpack : 使用webpack进行项目构建

npm install react react-dom --save
npm install  webpack --sava-dev

在这里插入图片描述

–save的含义是项目上线运行所需的包，即生产环境
–save-dev是开发环境所需的包

此时创建了一个文件 package-lock.json, 用来记录当前状态下实际安装的各个npm package的具体来源和版本号；一个文件夹 node_modules，内含有安装的插件

三、创建目录文件

3.1 创建文件

在这里插入图片描述

3.2 编码

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>clear-front</title>
  </head>
  <body>
    <div id="root"> 
        <!-- react DOM -->
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

index.js

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

webpack.config.js

const path = require("path");
module.exports = {
  // path.resolve() 方法会将路径或路径片段的序列解析为绝对路径 此处为指定入口文件
  entry: path.resolve(__dirname, "../src/index.js"), // _dirname 当前所在目录

  output: {
    path: path.resolve(__dirname, "../dist"), // 输出路径
    filename: "bundle.js", // 打包后的文件名
  },
  // 配置如何处理模块
  module: {
    rules: [
      {
        test: /\.jsx?$/, // 命中javascript文件
        use: {
          // 使用babel-loader转换js文件
          loader: "babel-loader",
          options: {
            presets: ["es201s5", "react"],
          },
          exclude: /node_modules/, // 排除node_modules目录下的文件，加快webpack搜索速度
        },
      },
      {
        test: /\.s(a|c)ss$/, //命中scss | sass 文件
        // 处理顺序为从后到前，即先交给 sass-loader处理，再把结果交给css-loader，最后再给style-loader
        //  sass-loader 把scss|sass转换成css
        //  css-loader 把css 转换成CommonJs模块
        //  style-loader 把js字符串生成为style节点
        use: ["style-loader", "css-loader", "sass-loader"],
        exclude: /node_modules/, // 排除node_modules目录下的文件，加快webpack搜索速度
      },
      {
        test: /\.(png|jpe?g|svg|gif)$/, // 命中各种图片文件
        use: ["url-loader"],
        options: {
          name: "[name]_[hash].[ext]",
          outputPath: "images",
          limit: "1024",
        },
      },
      {
        test: "/.(woff2?|eot|ttf|otf|mp4)$/",
        use: ["file-loader"],
      },
    ],
  },
};

3.3 安装`loader`插件

3.3.1 转换js 使用的loader

babel-loader: babel加载器

babel-preset-es2015: 支持es2015

babel-preset-react: jsx 转换成js

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save

在这里插入图片描述

3.3.2 转换css 使用的loader

npm install style-loader css-loader sass-loader --save-dev

在这里插入图片描述

3.3.3 转换图片、字体的loader

npm install url-loader file-loader --save-dev

在这里插入图片描述

待更新。。。。

Dark_programmer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从0构建一个项目（react）

从0到1 使用webpack创建项目一、创建项目并初始化二、安装react, react-dom, webpack三、创建目录文件3.1 创建文件3.2 编码3.3 安装```loader```插件3.3.1 转换js 使用的loader3.3.2 转换css 使用的loader3.3.3 转换图片、字体的loader一、创建项目并初始化在这里，我创建的项目叫 webpackBuild，然后在当前目录下打开终端，输入以下指令初始化项目: npm init这是在init过程中的一些内容，可自行修改
复制链接

扫一扫