이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!