2024年Web前端最全快速搭建 webpack + react 环境，阿里大牛教你自己写前端第三方库

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}

其中 src/index.js 内容如下：

import React from ‘react’;

import ReactDOM from ‘react-dom’;

ReactDOM.render(

Hello World

,

document.getElementById(‘root’)

);

其中 build/index.html 内容如下：

修改 package.json 中的 scripts 部分如下：

“scripts”: {

“build”: “webpack”

}

而后运行 ‘npm run build’ 运行在本地 ‘./build/index.html’ 看到渲染的页面

服务器环境配置

---

修改或添加 webpack.config.js 中以下部分：

entry: [‘webpack/hot/dev-server’, path.resolve(__dirname, ‘./src/index.js’)], //指定入口

devServer: { //配置本地服务器

contentBase: ‘./build’,

colors: true,

historyApiFallback: true,

inline: false,

port: 4444,

process: true

}

修改 package.json 中的 scripts 部分如下：

“scripts”: {

“build”: “webpack”,

“dev”: “webpack-dev-server”

}

而后运行 ‘npm run dev’ 运行在本地 ‘http://localhost:4444/’ 看到渲染的页面

配置 css 和 less

在 ./src/ 中添加 index.less 和 font.css，分别写入以下内容测试功能

/* index.less */

h1 {

background-color: red;

}

/* font.css */

h1 {

color: yellow;

}

修改 webpack.config.js 部分：

module: { //设置 babel 模块

loaders: [{

test: /.(js|jsx)$/,

exclude: /node_modules/,

loader: “babel-loader”

},{

test: /.css$/,

loader: ‘style-loader!css-loader’

},{

test: /.less$/,

loader: ‘style-loader!css-loader!less-loader’

}]

}

修改 src/index.js 如下：

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import ‘./font.css’;

import ‘./index.less’;

ReactDOM.render(

Hello World

,

document.getElementById(‘root’)
);
然后重启运行(由于修改了 webpack.config.js，不能使用热替换)页面可以看到相关样式

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

t.getElementById(‘root’)
);
然后重启运行(由于修改了 webpack.config.js，不能使用热替换)页面可以看到相关样式

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

[外链图片转存中…(img-nehfqTNd-1714847582109)]