찾다

집  >  기사  >  웹 프론트엔드  >  webpack+react 개발 환경 구축 방법

webpack+react 개발 환경 구축 방법

php中世界最好的语言
php中世界最好的语言원래의
2018-05-28 15:41:181563검색

이번에는 webpack+react 개발 환경 구축 방법과 webpack+react 개발 환경 구축 시 Notes에 대해 알려드리겠습니다.

환경은 주로 버전에 따라 다릅니다

  1. webpack@4.8.1

  2. webpack-cli@2.1.3

  3. webpack-dev-server@3.1.4

  4. react@ 16 .3.2

  5. babel-core@6.26.3

  6. babel-preset-env@1.6.1

  7. 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이 필요합니다. 그것을 변환합니다.

  1. babel-croe는 바벨 코어 파일입니다

  2. babel-preset-env ES6를 ES5로 변환

  3. babel-preset-react JSX를 js로 변환

  4. 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中文网其它相关文章！

推荐阅读：

怎样使用JS实现调用本地摄像头

怎样使用JS实现3des+base64加密解密算法

위 내용은 webpack+react 개발 환경 구축 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：자바스크립트 성능 최적화를 위한 시분할 기능 소개다음 기사：자바스크립트 성능 최적화를 위한 시분할 기능 소개

관련 기사

더보기