Rumah > Artikel > hujung hadapan web > React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例）

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

寻∝梦asal: 2018-09-11 10:53:553317semak imbas

本篇文章主要的向大家介绍了关于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(&#39;path&#39;);module.exports = {entry:&#39;./src/app.js&#39;, //入口文件配置为app.js文件。若入口文件为index.js,这里可以直接写成&#39;./src&#39;//入口文件很多的话，可以写成下面的格式：
/*entry:{    pageOne: &#39;./src/pageOne/index.js&#39;,    pageTwo: &#39;./src/pageTwo/index.js&#39;,    pageThree: &#39;./src/pageThree/index.js&#39;}
*/output: {    filename:&#39;bundle.js&#39;,//js合并后的输出的文件，命名为bundle.js    path:path.resolve(__dirname,&#39;build&#39;),//指令的意思是：把合并的js文件，放到根目录build文件夹下面    //publicPath:&#39;&#39;,生成文件的公共路径，‘/work/reactweb/dist’ 生产环境下所有的文件路径将会添加这个公共路径
}//多个入口的输出文件格式
/*output: {    filename:&#39;[name].js&#39;,//name相当于变量，等同于pageOne/pageTwo/pageThree    path:path.resolve(__dirname,&#39;build&#39;),//}
*/
}

在src文件夹下面，新建一个app.js

var app=document.createElement("p");
app.innerHTML=&#39;<h1> Hello World!</h1>&#39;;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(&#39;html-webpack-plugin&#39;); module.exports = {
...//前面的对象后面需要添加逗号隔开plugins:[new HtmlwebpackPlugin({    title:&#39;reactwebpack&#39;
   /* 全部都是可选项    title:"reactwebpack",   配置html 的title    filename: , html文件的名字，默认是index    template:&#39;&#39;, 模板文件路径    inject:true|&#39;body&#39;|&#39;head&#39;|&#39;false&#39;, 设置为 true|&#39;body&#39;:js文件引入的位置为body的结束标签之前    favicon:&#39;&#39;,  设置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 --hot

webpack.config.js 里面的配置：

var webpack=require(&#39;webpack&#39;);//用于服务器的配置

module.exports ={...devServer:{
    //contentBase: path.join(__dirname,"dist"),//用于静态文件的目录，不设置默认为当前根目录
   // contentBase:[path.join(__dirname,&#39;public&#39;),path.join(__dirname,&#39;assets&#39;)],//支持多路径
   // 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(&#39;webpack&#39;);//引入webpack模块var webpackDevServer = require(&#39;webpack-dev-server&#39;);//引入服务器模块var config = require(&#39;./webpack.config&#39;);//引入webpack配置文件var server = new webpackDevServer(webpack(config),{    //contentBase: path.join(__dirname,"dist"),//用于静态文件的目录，不设置默认为当前根目录
   // contentBase:[path.join(__dirname,&#39;public&#39;),path.join(__dirname,&#39;assets&#39;)],//支持多路径
   // 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(&#39;*&#39;,function(req,res){
    res.sendFile(__dirname+&#39;/build/index.html&#39;);
});
server.listen(8080,function(){
 console.log(&#39;正常打开8080端口&#39;)
});

若要启动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:[ 
              &#39;webpack-dev-server/client?http://localhost:8080&#39;,  // 热更新监听此地址                                                     
               &#39;webpack/hot/dev-server&#39;,  // 启用热更新
              path.resolve(__dirname, &#39;src&#39;, &#39;app&#39;)  
        ]        
    },...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:[&#39;style-loader&#39;,&#39;css-loader&#39;],

    },
    {   //配置辅助loader
        test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader:&#39;url-loader&#39;,
        options:{limit:8091}
    }
]
},...resolve:{
    extensions:[&#39;.js&#39;,&#39;jsx&#39;,&#39;less&#39;,&#39;.css&#39;,&#39;.scss&#39;]//后缀名自动补全
}
}

在src文件夹下面创建两个文件夹：

src
    css
        css.css
    img        7.png

css.css 里面的代码：

p{    background:url(&#39;../img/7.png&#39;) no-repeat 211px 0px ;  

}

app.js 入口文件导入css文件

require(&#39;./css/css&#39;);

都配置好后
在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(&#39;extract-text-webpack-plugin&#39;);

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:&#39;url-loader&#39;,
        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:{ 
    &#39;autoprefixer&#39;: {},   
    }
}

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:&#39;url-loader&#39;,
        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使用手册栏目中学习），有问题的可以在下方留言提问。

Atas ialah kandungan terperinci React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：react是什么？react的基本使用介绍（附实例）Artikel seterusnya：react如何配置开发环境？React+webpack 的开发环境配置步骤（深入篇）

Artikel berkaitan

Lihat lagi