2024年最全快速搭建 webpack + react 环境(1)，大厂Web前端面试真题精选

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

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

其中 .babelrc 内容如下：

{

“presets”: [

“react”,

“es2015”

]

}

其中 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’;

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

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

‘react’;

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

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

[外链图片转存中…(img-y7D7vs9k-1715682545859)]

[外链图片转存中…(img-BOK69HyZ-1715682545860)]