设为首页收藏本站
开启辅助访问

没有废话，webpack手动搭建React+Typescript运行环境

 您所在的位置：网站首页 › 从0开始的react › 没有废话，webpack手动搭建React+Typescript运行环境

没有废话，webpack手动搭建React+Typescript运行环境

2023-03-25 13:52| 来源: 网络整理| 查看: 265

本文从空文件夹开始搭建react运行环境，涉及到css，sass，tsx，ts，jpg文件的解析

开始：

新建一个空文件夹,安装webpack的依赖 npm i webpack webpack-cli -D 复制代码

新建基本文件

image.png新建了一个index.js,里面的内容是简单的箭头函数

const add = (a, b) => { return a + b; } console.log(add(1, 2)); 复制代码

下面来用webpack编译这个项目

在根目录新建webpack配置文件webpack.config.js

const path = require("path"); module.exports = { entry: { hello: "./src/index.js", }, output: { filename: "[name].js", path: path.join(__dirname, "dist"), }, }; 复制代码

编译 npx webpack 复制代码

编译成功。webpack提醒我们没有设置mode，否则会给默认值production。待会我们暂且设置为productionimage.png生成了一个在dist下面的文件image.pnghello.js内容为

(()=>{"use strict";console.log(3)})(); 复制代码

非常简洁

添加与ts相关的功能

安装依赖 npm i typescript ts-loader -D 复制代码

typescrit是ts的基本依赖，ts-loader为的是给webpack添加解析ts文件的能力

typescript也是放在devDependencies里面，ts只在开发有用

生成ts的配置文件 npx tsc -init 复制代码

image.png

成功

image.png

编写ts文件

将index.js改成index.ts文件

const add = (a: number, b: number) => { return a + b; } console.log(add(1, 2)); 复制代码

给add函数的参数添加了类型定义

编写webpack配置文件 const path = require("path"); module.exports = { entry: { hello: "./src/index.ts", //入口也要修改 }, output: { filename: "[name].js", path: path.join(__dirname, "dist"), }, //添加的部分 module: { rules: [ { test: /\.ts$/, use: { loader: "ts-loader" }, }, ], }, mode: "production", }; 复制代码

添加了编译ts文件功能的部分，用ts-loader来进行编译，并且会依据tsconfig.json来进行

编译 npx webpack 复制代码

image.png

成功

生成hello.js内容和之前一致，下面就不贴图了😄

添加React功能

安装依赖 npm i react react-dom npm i @types/react @types/react-dom -D 复制代码

编写代码文件

将index.ts改成index.tsx

import { createRoot } from "react-dom/client"; const App = () => { return hello 慢功夫; }; const root = createRoot(document.getElementById("root")!); root.render(); 复制代码

修改tsconfig.json，添加

compilerOptions: { "jsx": "react-jsx", } 复制代码

jsx的值可以为preserve 、react-native、 react-jsx、react-jsxdev。每种值的效果不同，留待其他文章详述

当jsx的值设为react-jsx, *.tsx文件中就不用引入React。如果有相关的eslint报错，可以将该报错关闭。

添加模版文件

index.htmlimage.png添加htmlwebpackplugin依赖，让编译好的js文件自动注入html文件中

npm i html-webpack-plugin -D 复制代码

编写webpack配置文件 const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { hello: "./src/index.tsx", //修改了这里 }, output: { filename: "[name].js", path: path.join(__dirname, "dist"), }, module: { rules: [ { test: /\.tsx?$/, // 修改了这里 use: { loader: "ts-loader", options: { // transpileOnly: true, }, }, }, ], }, //添加了一个插件 plugins: [ new HtmlWebpackPlugin({ template: "./public/index.html", }), ], mode: "production", }; 复制代码

编译 npx webpack 复制代码

成功

image.png

image.png在浏览器中打开index.htmlimage.png

只用ts-loader就完成了react代码的编译，并没有用到babel，神奇吧😃

添加解析样式文件的功能

安装依赖 npm i sass sass-loader css-loader style-loader -D 复制代码 sass是sass功能的依赖库 sass-loader是提供给webpack解析sass语法成普通css语法的能力 css-loader是用于解析css文件，将css翻译成形如module.export = ${css}的js代码，让webpack能够像处理js代码一样处理css代码 style-loader会在项目运行的时候，将css代码注入页面的标签中，即源文件看不到中的样式代码，只在运行的页面中可以看到

image.png

编写代码文件

添加.index.scss

.app { background-color: cyan; } 复制代码

修改.index.tsx文件

import "./index.scss"; const App = () => { return hello 慢功夫; //此处修改 }; 复制代码

编写webpack配置文件 module: { rules: [ { test: /\.tsx?$/, use: { loader: "ts-loader", }, }, //添加解析样式文件的功能 { test: /.s?css$/, use: ["style-loader", "css-loader", "sass-loader"], }, ], }, 复制代码

编译 npx webpack 复制代码

成功

image.pngimage.png

添加解析图片的功能

在webpack4中，处理图片的loader有三种，

file-loader, 它会将图片复制至构建目录中，并且在代码中插入图片的url url-loader, 它会将size小于某个大小的图片转换成base64编码，其他的则用file-loader加载。通过url-loader可以将许多细小的图片直接放入代码，减少页面渲染的时候发出的http请求 raw-loader，它直接将文件的内容复制到产物中，适用于svg场景

在webpack5中，这些功能使用频率极高，几乎成为了标配组件，所以webpack5直接将其内置，不需要额外下载依赖包。

编写代码文件

添加图片image.png引入图片

//index.tsx import { createRoot } from "react-dom/client"; import "./index.scss"; import catImg from "../assets/cat.jpg"; const App = () => { return ( hello 慢功夫 小猫的图片 ); }; 复制代码

修改webpack配置

module: { rules: [ { test: /\.tsx?$/, use: { loader: "ts-loader", options: { transpileOnly: true, }, }, }, { test: /.s?css$/, use: ["style-loader", "css-loader", "sass-loader"], }, { test: /\.(jpg|png|jpeg)$/i, type: "asset/resource", //file-loader }, { test: /\.(jpg|png|jpeg)$/i, type: "asset/inline", //url-loader parser:{ dataUrlCondition:{ maxSize: 1024 } } }, { test: /\.(jpg|png|jpeg)$/i, type: "asset/source", //raw-loader } ], }, 复制代码

如果不小心引入图片过大，会有性能提示image.png在配置中关掉性能提示就好

{ performance: { // 关闭性能提示 hints: false, }, } 复制代码

编译 npx webpack 复制代码

成功 image.png image.png

添加热部署功能

安装依赖 npm i webpack-dev-server -D 复制代码

编写webpack配置文件 devServer: { static: { directory: path.join(__dirname, "public"), }, compress: true, port: 9000, open: true, }, 复制代码

该配置会在本地开启一个服务器，我们修改代码保存之后，就可以实时地体现在页面上，而不用反复的build了。static：配置本地服务的静态目录compress： 是否启用gizp压缩，默认打开port：设置服务器启动的端口号：默认8080open：是否在项目启动的时候自动打开浏览器，默认false

更详细的serve配置可以看这篇文章：

启动服务器 npx webpack serve 复制代码

成功

image.png可以修改修改代码，看页面是否会自动呈现修改后的样式

修改package.json, 方便命令化操作 "scripts": { "start": "webpack serve", "build": "rm -rf ./dist && webpack" }, 复制代码

当我们要启动本地服务器做开发的时候，就可以输入 npm start。当我们想要构建项目的时候，就可以输入npm run build

总结：

好了，基本的react环境搭建出来了。可以在这个环境中进行各种react api测试.除此之外，这个架子还有一些问题，比如打包速度太慢, 没有区分开发环境和生产环境等等，这些之后再加上。

有好的功能建议加上，可以在评论区留言，本人活跃在掘金社区😁



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3