webpack+react 개발 환경 구축 방법
이번에는 webpack+react 개발 환경 구축 방법과 webpack+react 개발 환경 구축 시 Notes에 대해 알려드리겠습니다.
환경은 주로 버전에 따라 다릅니다
webpack@4.8.1
webpack-cli@2.1.3
webpack-dev-server@3.1.4
react@ 16 .3.2
babel-core@6.26.3
babel-preset-env@1.6.1
bable-preset-react@6.24.1
webpack 설치 및 구성
1. 시작
새 프로젝트 디렉토리를 생성하고, npm을 초기화하고, 새로운 개발 소스 디렉토리를 생성합니다
mkdir webpack-react && cd webpack-react npm init -y mkdir src
2. webpack-cli
webpack은 4.x 버전부터 시작하므로 webpack과 webpack-cli를 설치해야 합니다. 동시에 (이 도구는 webpack을 실행하는 명령줄에서 사용됩니다)
npm install webpack webpack-cli --save-dev
3.wepback구성 파일
프로젝트 루트 디렉토리에 webpack.config.js 파일을 새로 생성합니다. 이 파일은 webpack을 실행하기 위한 핵심 파일입니다.
webpack.config.js 기본 구성
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: { // webpack打包后出口文件
filename: 'app.js', // 打包后js文件名称
path: path.resolve(dirname, 'dist') // 打包后自动输出目录
}
}package.json 파일 스크립트 구성
"scripts": {
"build": "webpack"
}이때, webpack을 실행하려면 명령줄에서 npm run build를 실행하면 프로젝트 루트 디렉터리에서 자동으로 webpack.config를 찾습니다. 패키징을 수행하기 위한 js 파일입니다.
npm run build // webpack打包后的项目 ├── dist │ └── app.js // 打包后的app.js ├── package.json ├── src │ └── index.js // 源目录入口文件 └── webpack.config.js
webpack.config.js 모듈 관련 구성
webpack은 모든 파일을 모듈로 간주하며, 그림, CSS 파일, 글꼴 및 기타 정적 리소스는 js 파일로 패키징되므로 더 많은 로더 파일이 쿼리할 수 있습니다. URL을 입력한 다음 필요한 로더 파일을 설치합니다.
npm install style-loader css-loader url-loader --save-dev
webpack.config.js에 모듈 모듈을 추가하세요
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
}
]
}
}로더를 도입한 후 src/index.js 파일에서 가져오려는 CSS 파일이나 기타 정적 리소스를 가져올 수 있습니다.
cd src && touch main.css
src/index.js 파일은 css
import "./main.css";
webpack.config.js 플러그인 구성을 소개합니다
기본 js 파일과 정적 파일을 js 파일로 성공적으로 패키징한 후 이 js 파일을 html 파일에서 webpack 플러그인 ***html-webpack-plugin***은 이를 수행하며 자동으로 html 파일을 생성하고 패키지된 js 파일을 html에 넣을 수 있습니다.
npm install html-webpack-plugin --save-dev
webpack.config.js는 플러그인을 구성합니다
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({title: 'production'}) // 配置plugin
]
};npm run build를 실행하면 dist 디렉터리에 index.html 파일이 추가로 있는 것을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>name</title> </head> <body> // 打包后的app.js已经被自动插入了html文件 <script type="text/javascript" src="app.js"></script></body> </html>
이제 웹팩의 가장 간단하고 기본적인 요구사항이 구성되었습니다. 이때 프로젝트 구조는 다음과 같습니다.
├── dist // 生产目录 │ ├── app.js │ └── index.html ├── package.json ├── src // 源目录 │ ├── index.js │ └── main.css └── webpack.config.js
React의 webpack 구성
React 설치
npm install react react-dom --save
React 설치, wepback 변환은
React 구성 요소가 JSX로 구성되어 브라우저에서 JSX를 인식할 수 없으며 babel이 필요합니다. 그것을 변환합니다.
babel-croe는 바벨 코어 파일입니다
babel-preset-env ES6를 ES5로 변환
babel-preset-react JSX를 js로 변환
babel-loader webpack babe 변환
코드를 복사하세요 코드는 다음과 같습니다.
npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev
.babelrc 구성 파일
프로젝트 루트 디렉터리에 새 .babelrc 파일을 만듭니다. 이 파일은 Babel의 핵심 구성이며 프로젝트 루트 디렉터리에서 자동으로 인식됩니다.
// .babelrc
{
"presets": ["env", "react"]
}webpack babel-loader 구성
// 在webpack.config.js 的modules.rules中加入此配置
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}html-webpack-plugin 템플릿 구성
우리는 반응이 페이지의 루트 요소를 가져와야 한다는 것을 알고 있으며 그런 다음 렌더링이 적용됩니다. 새 html 파일을 만들 수 있습니다. html-webpack- 플러그인 플러그인은 이 파일을 기반으로 항목을 패키지합니다.
그래서 루트 디렉터리에 새 html 파일을 만들고 이 파일을 템플릿으로 사용합니다.
// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> // react需要的渲染根元素 <p id="root"></p> </body> </html>
현재 webpack.config.js 구성:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'production',
template: './index.html' // 模板文件位置
})
]
};React 작성 및 webpack 실행
// src/index.js
import React from 'react';
import ReactDom from 'react-dom';
import './main.css'
ReactDom.render(
<h1>hello world</h1>,
document.getElementById('root')
);运行npm run build，生成dist目录，打开dist目录中的index.html文件，可以发现浏览器已正常渲染"hello world"。
dev环境热更新配置
react的wepack完成以后，是不是发现每修改一次代码，想看到效果，得重新打包一次才行。webpack-dev-server配置可以帮助我们实现热更新，在开发环境解放我们的生产力。
安装webpack-dev-server
npm install webpack-dev-server --save-dev
webpack.config.js 配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'production',
template: './index.html'
}),
// hot 检测文件改动替换plugin
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
// webpack-dev-server 配置
devServer: {
contentBase: './dist',
hot: true
},
};运行webpack-dev-server
在 package.json 文件 加入 scripts 配置：
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --open --mode development" // webpack-dev-server
},命令行运行 npm run dev
可以在浏览器中输入localhost:8080 内容即为dist目录下的index.html内容。修改src/index.js中的内容或者依赖，即实时在浏览器热更新看到。
至此，react的webpack的基础开发环境已全部配置完毕。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 webpack+react 개발 환경 구축 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7563
15
1385
52
84
11
61
19
28
99
권장되는 AI 지원 프로그래밍 도구 4가지
Apr 22, 2024 pm 05:34 PM
이 AI 지원 프로그래밍 도구는 급속한 AI 개발 단계에서 유용한 AI 지원 프로그래밍 도구를 많이 발굴했습니다. AI 지원 프로그래밍 도구는 개발 효율성을 높이고, 코드 품질을 향상시키며, 버그 발생률을 줄일 수 있습니다. 이는 현대 소프트웨어 개발 프로세스에서 중요한 보조자입니다. 오늘 Dayao는 4가지 AI 지원 프로그래밍 도구(모두 C# 언어 지원)를 공유하겠습니다. 이 도구가 모든 사람에게 도움이 되기를 바랍니다. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot은 더 빠르고 적은 노력으로 코드를 작성하는 데 도움이 되는 AI 코딩 도우미이므로 문제 해결과 협업에 더 집중할 수 있습니다. 힘내
최고의 AI 프로그래머는 누구일까요? Devin, Tongyi Lingma 및 SWE 에이전트의 잠재력을 살펴보세요.
Apr 07, 2024 am 09:10 AM
세계 최초의 AI 프로그래머 데빈(Devin)이 태어난 지 한 달도 채 안 된 2022년 3월 3일, 프린스턴 대학의 NLP팀은 오픈소스 AI 프로그래머 SWE-에이전트를 개발했습니다. GPT-4 모델을 활용하여 GitHub 리포지토리의 문제를 자동으로 해결합니다. SWE-bench 테스트 세트에서 SWE-agent의 성능은 Devin과 유사하며 평균 93초가 걸리고 문제의 12.29%를 해결합니다. SWE-agent는 전용 터미널과 상호 작용하여 파일 내용을 열고 검색하고, 자동 구문 검사를 사용하고, 특정 줄을 편집하고, 테스트를 작성 및 실행할 수 있습니다. (참고: 위 내용은 원문 내용을 약간 조정한 것이지만 원문의 핵심 정보는 그대로 유지되며 지정된 단어 수 제한을 초과하지 않습니다.) SWE-A
Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 알아보세요.
Mar 28, 2024 pm 10:00 PM
Go 언어 개발 모바일 애플리케이션 튜토리얼 모바일 애플리케이션 시장이 지속적으로 성장함에 따라 점점 더 많은 개발자가 Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 모색하기 시작했습니다. 간단하고 효율적인 프로그래밍 언어인 Go 언어는 모바일 애플리케이션 개발에서도 강력한 잠재력을 보여주었습니다. 이 기사에서는 Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 자세히 소개하고 독자가 빠르게 시작하고 자신의 모바일 애플리케이션 개발을 시작할 수 있도록 특정 코드 예제를 첨부합니다. 1. 준비 시작하기 전에 개발 환경과 도구를 준비해야 합니다. 머리
가장 인기 있는 다섯 가지 Go 언어 라이브러리 요약: 개발을 위한 필수 도구
Feb 22, 2024 pm 02:33 PM
가장 인기 있는 다섯 가지 Go 언어 라이브러리 요약: Go 언어는 탄생 이후 광범위한 관심과 적용을 받아왔습니다. 새롭게 떠오르는 효율적이고 간결한 프로그래밍 언어인 Go의 급속한 발전은 풍부한 오픈 소스 라이브러리의 지원과 불가분의 관계입니다. 이 기사에서는 인기 있는 Go 언어 라이브러리 5개를 소개합니다. 이러한 라이브러리는 Go 개발에서 중요한 역할을 하며 개발자에게 강력한 기능과 편리한 개발 경험을 제공합니다. 동시에 이러한 라이브러리의 용도와 기능을 더 잘 이해하기 위해 구체적인 코드 예제를 통해 설명하겠습니다.
Android 개발에 가장 적합한 Linux 배포판은 무엇입니까?
Mar 14, 2024 pm 12:30 PM
Android 개발은 바쁘고 흥미로운 작업이며, 개발에 적합한 Linux 배포판을 선택하는 것이 특히 중요합니다. 많은 Linux 배포판 중에서 Android 개발에 가장 적합한 배포판은 무엇입니까? 이 기사에서는 이 문제를 여러 측면에서 살펴보고 구체적인 코드 예제를 제공합니다. 먼저 현재 인기 있는 여러 Linux 배포판(Ubuntu, Fedora, Debian, CentOS 등)을 살펴보겠습니다. 이들은 모두 고유한 장점과 특징을 가지고 있습니다.
조종석 웹 UI에서 관리 액세스를 활성화하는 방법
Mar 20, 2024 pm 06:56 PM
Cockpit은 Linux 서버용 웹 기반 그래픽 인터페이스입니다. 이는 주로 신규/전문가 사용자가 Linux 서버를 보다 쉽게 관리할 수 있도록 하기 위한 것입니다. 이 문서에서는 Cockpit 액세스 모드와 CockpitWebUI에서 Cockpit으로 관리 액세스를 전환하는 방법에 대해 설명합니다. 콘텐츠 항목: Cockpit 입장 모드 현재 Cockpit 액세스 모드 찾기 CockpitWebUI에서 Cockpit에 대한 관리 액세스 활성화 CockpitWebUI에서 Cockpit에 대한 관리 액세스 비활성화 결론 조종석 입장 모드 조종석에는 두 가지 액세스 모드가 있습니다. 제한된 액세스: 이는 조종석 액세스 모드의 기본값입니다. 이 액세스 모드에서는 조종석에서 웹 사용자에 액세스할 수 없습니다.
VSCode 이해: 이 도구는 어떤 용도로 사용됩니까?
Mar 25, 2024 pm 03:06 PM
"VSCode 이해: 이 도구는 어떤 용도로 사용됩니까?" 》프로그래머로서 초보자이든 숙련된 개발자이든 코드 편집 도구를 사용하지 않으면 할 수 없습니다. 많은 편집 도구 중에서 Visual Studio Code(약칭 VSCode)는 가볍고 강력한 오픈 소스 코드 편집기로 개발자들 사이에서 매우 인기가 높습니다. 그렇다면 VSCode는 정확히 어떤 용도로 사용되나요? 이 기사에서는 VSCode의 기능과 사용법을 자세히 살펴보고 독자에게 도움이 되는 구체적인 코드 예제를 제공합니다.
Go 언어 프런트엔드 기술 탐색: 프런트엔드 개발을 위한 새로운 비전
Mar 28, 2024 pm 01:06 PM
빠르고 효율적인 프로그래밍 언어인 Go 언어는 백엔드 개발 분야에서 널리 사용됩니다. 그러나 Go 언어를 프런트엔드 개발과 연관시키는 사람은 거의 없습니다. 실제로 프런트엔드 개발에 Go 언어를 사용하면 효율성이 향상될 뿐만 아니라 개발자에게 새로운 지평을 열어줄 수도 있습니다. 이 기사에서는 프런트엔드 개발에 Go 언어를 사용할 수 있는 가능성을 살펴보고 독자가 이 영역을 더 잘 이해할 수 있도록 구체적인 코드 예제를 제공합니다. 전통적인 프런트엔드 개발에서는 사용자 인터페이스를 구축하기 위해 JavaScript, HTML, CSS를 사용하는 경우가 많습니다.
