首页 / WEBPACK / React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例）

React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12791字，纯文字阅读大概需要19分钟。

内容图文

本篇文章主要的向大家介绍了关于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打包配置就建好了。

二、升级篇

  1. 引入自动生成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参考手册栏目中学习）

  1. 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 --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/

  1. 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开发环境配置步骤（附配置实例）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例）全部内容，希望文章能够帮你解决React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/284789.html

来源：【匿名】