이 글에서는 주로 React+webpack 개발 환경 구성 단계에 대한 세부 사항을 소개합니다. 관심 있는 학생들은 서로 반응에 대한 지식을 토론할 수 있습니다. 이제 이 글을 함께 읽어봅시다
여기서 먼저 각 단계의 방법과 이유를 분석하고 나중에 다른 글에서 웹팩을 빠르게 구축하는 방법에 대해 설명하겠습니다.
디렉토리:
기본 사항
1. 환경 요구 사항
2. NODE_PATH 구성
3. 프로젝트 폴더 생성
4. package.json 문서 생성
6.webpack.config.js 구성
1. HTML을 자동 생성하는 플러그인 소개
2. CSS 파일 지원
4. CSS 파일 제거 플러그인
win10 시스템을 사용하고 있습니다. 아래 설명된 단계는 Windows 시스템에서만 시도됩니다.
먼저 webpack을 구성합니다.
1. 기본 사항
:
1. 환경 요구 사항: nodejs + 컴퓨터 네트워크가 설치되었습니다. 2. cmd가 명령 창을 불러옵니다. 경로를 입력하면 출력에
C:UsersXXXAppDataRoamingnpm;이 표시됩니다. 그런 다음 내 컴퓨터로 이동하여 속성을 마우스 오른쪽 버튼으로 클릭하고 고급 시스템 설정->고급->환경 변수->아래 시스템 변수에 있습니다. ->새로 만들기->그런 다음 변수 이름: NODE_PATH, 값: C:UsersXXXAppDataRoamingnpmnode_modules를 입력합니다. 설정 후 확인 확인 확인을 클릭하세요.
3. 프로젝트 폴더를 생성하고(파일 이름 수정) 프로젝트 폴더 아래에서 Shift+마우스 오른쪽 버튼을 클릭하세요. 여기에서 Powershell 창 열기(중국어 시스템: 여기에서 명령 창 열기) 옵션을 선택합니다. 팝업 창의
쪽에 node -v를 입력하면 시스템이 노드 버전 번호를 반환합니다.
참고: 아래의 모든 PowerShell 창은 프로젝트 폴더의 루트 디렉터리에서 열립니다.
4 전역 웹팩 패키지를 설치합니다. npm install webpack -g 명령을 입력하고 Enter를 누르세요
시스템이 자동으로 설치됩니다. 설치된 후 webpack -v를 입력하여 webpack의 버전 번호를 확인하세요. 현재 버전은 3.3.0
5입니다. package.json 문서를 생성하세요.
Powershell에서 npm init를 입력하고 Enter 키를 누르면 시스템에서 관련 콘텐츠를 입력하라는 메시지를 표시합니다. 구성하고 싶지 않다면 Enter 키를 눌러 건너뛰세요.
下面是系统相关的提示：
name：reactwebpack +回车键 ，reactwebpack是我这个项目的名字
version：1.0.0+回车键description:（项目描述信息），这里按回车键直接跳过
entry point:(入口文件)按回车键跳过。入口文件会在下面讲的webpack.config.js 里面陪置
test command: 跳过就好，会面会重新配置这个指令内容。这里先跳过
git repository:(git 库的链接地址)。这里不涉及到git库，直接跳过keywords:（关键字），直接跳过先
author：（作者），可以输入自己的英文名+回车键license:(ISC 开源许可证号，与git相关) 这里跳过
Is this ok？（yes） 比对下内容，如果没错，直接输入y+回车键
로그인 후 복사
6 webpack.config .js 구성 파일
프로젝트 루트 디렉터리에 webpack.config.js 파일을 생성합니다. 동시에 소스 파일을 저장할 src 폴더를 만듭니다.
다음은 프로젝트의 전체 폴더 구조입니다.
reactwebpack #项目文件夹
build #正式打包用的文件夹（也有人用dist命名），用于生产环境
node_modules #npm 指令会自动生成
src #用于存放源文件
app.js #在src下面建一个app.js
index.html #在src下面建一个index.html
package.json #webpack 包的项目文件
webpack.config.js #webpack包的配置文件
README.md # 项目说明文档로그인 후 복사
webpack.config.js 구성 내용 및 지침:
var path=require('path');module.exports = {entry:'./src/app.js', //入口文件配置为app.js文件。若入口文件为index.js,这里可以直接写成'./src'//入口文件很多的话，可以写成下面的格式：
/*entry:{ pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', pageThree: './src/pageThree/index.js'}
*/output: { filename:'bundle.js',//js合并后的输出的文件，命名为bundle.js path:path.resolve(__dirname,'build'),//指令的意思是：把合并的js文件，放到根目录build文件夹下面 //publicPath:'',生成文件的公共路径，‘/work/reactweb/dist’ 生产环境下所有的文件路径将会添加这个公共路径
}//多个入口的输出文件格式
/*output: { filename:'[name].js',//name相当于变量，等同于pageOne/pageTwo/pageThree path:path.resolve(__dirname,'build'),//}
*/
}로그인 후 복사
src 폴더 아래에 새 app.js를 생성합니다.
var app=document.createElement("p");
app.innerHTML='<h1> Hello World!</h1>';document.body.appendChild(app);로그인 후 복사
src 아래에 index.html을 생성하고 번들을 도입합니다. .js 파일
<!DOCTYPE html><html lang="en">
<head>
<title>reactwebpack</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="../build/bundle.js"></script>
</body></html>로그인 후 복사
webpack 로컬 패키지를 설치하려면 아래 PowerShell 명령을 입력하세요. npm install webpack –save-dev
설치 후 webpack을 직접 입력하면 다음 내용이 표시되고 번들이 생성됩니다. 빌드 폴더 아래 .js
Hash: bba9fbe70c8f6bbe2cd1Version: webpack 3.3.0Time: 47ms
Asset Size Chunks Chunk Names
bundle.js 2.58 kB 0 [emitted] main
[0] ./src/app.js 111 bytes {0} [built]로그인 후 복사
브라우저로 src 아래 index.html을 엽니다.
가장 간단한 웹팩 패키징 구성이 설정되었습니다.
II. 업그레이드
html을 자동으로 생성하는 플러그인 소개 PowerShell 창 아래에 다음 명령을 입력하세요.
npm install html-webpack-plugin --save-dev
로그인 후 복사
주의 사항: 코드 실행 환경은 개발 모드와 프로덕션 모드로 구분됩니다. . 일부 플러그인은 개발 모드와 프로덕션 모드에서만 사용 가능합니다.
–save: 프로덕션 모드의 종속성을 json 파일에 자동으로 씁니다.
플러그인 설치 후 webpack.config.js 파일을 구성하세요. 모듈을 가져오고 module.exports에서 플러그인 개체 값을 설정합니다.
var HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = {
...//前面的对象后面需要添加逗号隔开plugins:[new HtmlwebpackPlugin({ title:'reactwebpack'
/* 全部都是可选项 title:"reactwebpack", 配置html 的title filename: , html文件的名字，默认是index template:'', 模板文件路径 inject:true|'body'|'head'|'false', 设置为 true|'body':js文件引入的位置为body的结束标签之前 favicon:'', 设置html的icon图标 minify:{}|false, 暂时不理解这个参数的使用 hash:true|false, 将添加唯一的webpack编译hash到所有包含的脚本和css文件 cache:true|false, 默认为true，仅仅在文件修改之后才会发布 showErrors:true|false, 默认为true，错误信息写入HTML页面中 chunks: 允许添加某些块（比如unit test） chunksSortMode: 允许控制块在添加到页面之前的排序方式 excludeChunks: 允许跳过模型块，比如单元测试块
*/
})
],
}로그인 후 복사
PowerShell 창에서 webpack을 실행하세요. 성공하면 출력에 설정된 경로(여기서는 빌드 폴더)에 index.html이 생성됩니다. 생성된 js는 자동으로 Bundle.js를 가져오므로 템플릿 index.html에 Bundle.js를 추가할 필요가 없습니다. (자세한 내용을 알고 싶으면 PHP 중국어 웹사이트React Reference Manual
칼럼을 참고하세요.)
webpack-dev-server
- 디버깅할 때는 먼저 webpack 명령을 실행한 후 그런 다음 브라우저로 열어서 수정된 결과를 확인하세요. 이 작업을 단순화하는 방법은 무엇입니까? Webpack은 node.js 익스프레스 서버를 도입하고, 핫 업데이트를 지원하며, 각 수정 및 저장 후에 브라우저 콘텐츠를 자동으로 새로 고칠 수 있습니다.
webpack-dev-server 설치 지침(개발을 지원하는 데 사용되므로 개발 모드 종속성을 작성함):
npm install webpack-dev-server --save-dev
로그인 후 복사
서버의 자동 새로 고침 모드는 iframe 모드와 인라인 모드로 구분됩니다. 여기서는 인라인 모드에 대해서만 설명합니다.
webpack의 서버 구성을 구성하는 방법에는 두 가지가 있습니다.
1. webpack.config.js 문서에서 직접 구성합니다.
在package.json文件里面配置，快捷指令。
“scripts":{
"start":"webpack-dev-server --inline --hot"
}
指令的意思：在PoweShell窗口下敲npm start 等效于npm webpack-dev-server -- inline --hot로그인 후 복사
webpack.config.js의 구성:
var webpack=require('webpack');//用于服务器的配置
module.exports ={...devServer:{
//contentBase: path.join(__dirname,"dist"),//用于静态文件的目录，不设置默认为当前根目录
// contentBase:[path.join(__dirname,'public'),path.join(__dirname,'assets')],//支持多路径
// publicPath:"/assets", 服务器地址:http://localhost:8080 ,output file:http://localhost:8080/assets/bundle.js
//compress:true,//gzip压缩
//headers:{"X-Custom-Foo":"bar"},
hot:true,//是否启用热更新
port:8080,
historyApiFallback:true,//html5接口,设置为true，所有路径均转到index.html
inline:true,//是否实时刷新，即代码有更改，自动刷新浏览器
stats:{colors:true},//显示bundle文件信息，不同类型的信息用不同的颜色显示
/*
proxy:{ //服务器代理配置 "/api":{ //相对路径已/api打头，将会触发代理
target:"http://localhost:3000", //代理地址
pathRewrite:{"^/api":""}, //路径替换
secure:false //跨域
}
}
*/
},...}로그인 후 복사
配置好后在PowerShell窗口敲npm start 启动服务器。
第一次尝试修改js时，如果浏览器的console控制台显示[HMR]Waitiing for update signal from WDS…,但此时网页内容没有刷新时。可以在PowerShell用ctrl+c来停止当前进程。页面就可以刷新过来。 连按两次ctrl+c，PowerShell 就会提示是否停止服务器，敲y回车就可以停掉服务器。
2. 重新建一个server.js ，专门用于服务器的配置。(推荐使用这种方式)
在根目录上创建一个server.js
在package.json文件里面配置，快捷指令,指定对应的配置文件。 "scripts": { "start":"node server.js"
},로그인 후 복사
server.js 的配置：var webpack = require('webpack');//引入webpack模块var webpackDevServer = require('webpack-dev-server');//引入服务器模块var config = require('./webpack.config');//引入webpack配置文件var server = new webpackDevServer(webpack(config),{ //contentBase: path.join(__dirname,"dist"),//用于静态文件的目录，不设置默认为当前根目录
// contentBase:[path.join(__dirname,'public'),path.join(__dirname,'assets')],//支持多路径
// publicPath:"/assets", 服务器地址:http://localhost:8080 ,output file:http://localhost:8080/assets/bundle.js
//compress:true,//gzip压缩
//headers:{"X-Custom-Foo":"bar"},
hot:true,//是否启用热更新
historyApiFallback:true,//html5接口,设置为true，所有路径均转到index.html
inline:true,//是否实时刷新，即代码有更改，自动刷新浏览器
stats:{colors:true},//显示bundle文件信息，不同类型的信息用不同的颜色显示
/*
proxy:{ //服务器代理配置
"/api":{ //相对路径已/api打头，将会触发代理
target:"http://localhost:3000", //代理地址
pathRewrite:{"^/api":""}, //路径替换
secure:false //跨域
}
}
*/});//将其他路由，全部返回index.htmlserver.app.get('*',function(req,res){
res.sendFile(__dirname+'/build/index.html');
});
server.listen(8080,function(){
console.log('正常打开8080端口')
});로그인 후 복사
若要启动node js api 的热更新功能，需要修改webpack.config.json 的entry的代码。
注意：在用webpack生成最终的build文件用于生产环境的时候，请先把热更新代码屏蔽掉，否则运行build里面的index.hmtl 时，会一直报错： GET http://localhost:8080/sockjs-node/info?t=1510883222453 net::ERR_CONNECTION_REFUSED msgClose @ client:164 abstract-xhr.js:132。
module.exports = {
entry: {
app:[
'webpack-dev-server/client?http://localhost:8080', // 热更新监听此地址
'webpack/hot/dev-server', // 启用热更新
path.resolve(__dirname, 'src', 'app')
]
},...plugins:[...new webpack.HotModuleReplacementPlugin(),//热更新配套插件...]
}로그인 후 복사
3.CSS 文件的支持
在实现webpack的基本配置和服务器的热更新后，我们将会考虑网页的具体实现（html+CSS+JS）。webpack是基于nodeJS平台，完全支持JS文件不支持css。所以要把css转成JS文件。webpack提供了一个两个模块来支持css文件转编译。
style-loader:将css内容插入到html的style
css-loader:处理css里面的@import 和url() 的内容，需要url-loader 和file-loader的支撑
file-loader: 用MD5 hash加密文件名后返回相应的路径
url-loader 在file-loader 基础上加了额外的功能。当链接的文件小于limit 8192时，可以直接返回DataURL。DataURL是图片格式转换成base64编码的字符串，并存储在URL中。这样可以减少客户端的请求次数
引入这两个loader的方法:
先安装着两个模块,相关的指令(用于开发模式的依赖)：
npm install css-loader style-loader --save-dev
npm install url-loader file-loader --save-dev
로그인 후 복사
修改webpack.config.js 的配置
module.exports ={...module:{
rules:[{
test:/\.css$/,
use:['style-loader','css-loader'],
},
{ //配置辅助loader
test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader:'url-loader',
options:{limit:8091}
}
]
},...resolve:{
extensions:['.js','jsx','less','.css','.scss']//后缀名自动补全
}
}로그인 후 복사
在src文件夹下面创建两个文件夹：
src
css
css.css
img 7.png로그인 후 복사
css.css 里面的代码：
p{ background:url('../img/7.png') no-repeat 211px 0px ;
}로그인 후 복사
app.js 入口文件导入css文件
require('./css/css');
로그인 후 복사
都配置好后
在PowerShell 下敲npm start 运行服务器，浏览器上输入http://localhost:8080/
CSS 文件剥离插件
css文件和html混合，这不符合html的优化思路。所以要求webpack生成的最终文件css也是单独一个文件。这里webpack提供了extract-text-webpack-plugin插件。
安装的指令：
npm install extract-text-webpack-plugin --save-dev
로그인 후 복사
修改webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {...module:{
rules:[{
test:/\.css$/,
use:ExtractTextPlugin.extract({ //使用ExtractTextPlugin 插件
fallback:"style-loader",
use:"css-loader"
}),
},{ //配置辅助loader
test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader:'url-loader',
options:{limit:8091}
}
]
},...plugins:[...new ExtractTextplugin("styles.css"), //插件声明
]，...}로그인 후 복사
停掉服务器，然后敲webpack 指令就会看到build文件下的styles.css 文件。
5.其他css辅助模块
less 模块 sass模块 前缀postcss模块
安装指令：
npm install sass-loader node-sass webpack --save-dev
npm install less-loader less --save-dev
npm i -D postcss-loader
로그인 후 복사
在src文件夹下创建两个文件夹（less,scss）及相应的文件：
less.less:
@color:#f938ab;p{ color:@color;
}로그인 후 복사
scss.scss:$font-stack:Helvetica,sans-serif;$primary-color:#333;
p{
font:100% $font-stack;
border:1px solid $primary-color;
}로그인 후 복사
在app.js 里面引用
在根目录上创建postcss.config.js（webpack 会自动找到这个文件):
module.exports = { plugins:{
'autoprefixer': {},
}
}로그인 후 복사
webpack.config.js 里面配置:
module.exports ={...module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
fallback:"style-loader",//用于开发环境
use:["css-loader","postcss-loader"]
}),
},{ //配置辅助loader
test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader:'url-loader',
options:{limit:8091}
},
{
test:/\.less$/,
use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
fallback:"style-loader",//用于开发环境
use:["css-loader","postcss-loader","less-loader"]
}),
},
{
test:/\.scss$/,
use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
fallback:"style-loader",//用于开发环境
use:["css-loader","postcss-loader","sass-loader"]
}),
}
]
},...}로그인 후 복사
本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。
위 내용은 React 개발 환경을 어떻게 구성하나요? React+webpack 개발 환경 구성 단계(구성 예시 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
