React如何配置開發環境？ React+webpack開發環境設定步驟（附設定實例）
- 寻∝梦原創
- 2018-09-11 10:53:553357瀏覽
本篇文章主要的向大家介紹了關於React webpack開發環境設定步驟的詳情。有興趣的同學可以互相討論關於react方面的知識，現在就讓我們一起來看這篇文章吧
這裡先分解每一步的做法和原因，後面的其他文章會講怎麼快速的搭建webpack。
目錄：
一基礎篇
1.環境需求
2.NODE_PATH的設定
3. 建立專案資料夾
4.安裝webpack全域套件
5.建立package.json 文件
6.webpack.config.js 設定
二升級篇
1. 引入自動產生html的外掛程式
2. webpack-dev-server
3. CSS 檔案的支援
4. CSS 檔案剝離外掛
5. 其他css輔助模組
我用的是win10的系統,下面所講的步驟都是只試用與windows系統。
先把webpack配置好，以下是設定步驟：
一、基礎篇：
1.環境需求：已安裝好nodejs 電腦連網
2.NODE_PATH的配置：cmd調出命令符窗口，然後敲path，在輸出的一堆內容裡面，會有
C:\Users\XXX\AppData\Roaming\npm; 然後在我的電腦->右鍵屬性->高級系統設定->高級->環境變數->在系統變數下面->新建->然後變數名敲：NODE_PATH，值：C:\Users \XXX\AppData\Roaming\npm\node_modules。設好後點確定 確定 確定。
3.建立專案資料夾（並修改檔案名稱），在專案資料夾下方按shift 右鍵。選擇 在此處開啟Powershell視窗(中文系統：在此處開啟命令視窗) 的選項。在跳出的視窗裡
邊，輸入 node -v ,系統會回傳node的版本號。
備註：下面所有的PowerShell視窗都是在專案資料夾根目錄中開啟。
4.安裝全域的webpack包，指令：npm install webpack -g 然後按回車鍵
系統會自動安裝，等裝好後，敲webpack -v 就能看到webpack的版本號，我目前版本為3.3.0 版本
5.創建package.json 文件
在Powershell下，敲：npm init 回車，接著系統會提示輸入相關內容。若不想配置，直接按回車鍵跳過。
下面是系统相关的提示： 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，並引入bundle.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，若成功將會顯示下面內容，並且build資料夾下面將會產生bundle.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 。就會顯示
Hello World!
這樣一個最簡單的webpack打包設定就建好了。
二、升級篇
引入自動產生html的外掛
在PowerShell 視窗下方敲指令：
npm install html-webpack-plugin --save-dev
小註：程式碼運行環境分為開發模式和生產模式，有些外掛只是在開發的時候用到。
–save:自動寫入json檔案的生產模式下的依賴關係(dependencies)。
–save-dev:自動寫入json檔案的發展模式下的依賴關係(devDependencies)。
外掛程式安裝好後，設定webpack.config.js 檔案。引入模組，並在module.exports 設定plugins物件值。
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，成功後將，在output設定的路徑（這裡是build資料夾）下產生index.html。產生的js會自動引入bundle.js，所以模板index.html 不需要再加入bundle.js的引進。 （想看更多就到PHP中文網React參考手冊欄位學習）
webpack-dev-server
上面調試，每次都需要先執行webpack指令，再用瀏覽器開啟才能看修改後的結果。怎麼簡化這個工作？ webpack可以引入node.js 的express 伺服器，支援熱更新，每次修改儲存後會自動刷新瀏覽器的內容。
安裝webpack-dev-server的指令(輔助開發用的，所以寫入開發模式依賴關係)：
npm install webpack-dev-server --save-dev
伺服器自動刷新方式分為iframe 和inline mode，這裡只講inline mode模式。
webpack 的伺服器設定也有兩種方法設定：
1.直接再webpack.config.js 文件裡邊設定。
在package.json文件里面配置，快捷指令。
“scripts":{
"start":"webpack-dev-server --inline --hot"
}
指令的意思：在PoweShell窗口下敲npm start 等效于npm webpack-dev-server -- inline --hotwebpack.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.pngcss.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中文網其他相關文章！