本文介绍了webpack 2.x配置reactjs基本开发环境详解，分享给大家，具体如下： [b]当前webpack版本：2.2；react: 15.4.2[/b] webpack从1.x升级到2.x替换了几个接口，包括module.loaders这样的重要接口已被弃用（[url=https://webpack.js.org/guides/migrating/]详细变更[/url]）。官网目前已不推荐使用1.x版本，早上折腾一番，根据2.2版本配置了react基本的开发环境，满足不太复杂的web应用开发，后期会逐步优化配置文件。 如果您之前使用过webpack，需要改动的地方并不大。下文假定您没有接触过类似的打包工具（但了解npm、jsx再好不过），以跟我一样一个新手的身份认识这些，如有不妥之处望不吝赐教。 如果您的react项目是引入的以下三个js文件在浏览器端编译jsx，那么不需要用webpack做开发环境。 但是在产品上线阶段，我们很不推荐这样做。1，用户需要下载这三个文件，浪费了带宽；2，下载完成后需要在浏览器端编译jsx文件，浪费了时间和资源。 如果将开发阶段的项目代码打包编译为一个js文件，再推上线，那么：1，将HTTP请求减少为1个；2，不需要用户端再浪费时间和资源去编译，直接运行上线前已编译好的js代码。 如果是前者，引入项目js代码的script标签type值为"text/babel"；如果是后者，type值为"text/javascript"。 [b]如何做？[/b] 一，安装nodejs，使用它附带的npm包管理工具。为什么要用npm？后期会下载react依赖、babel依赖、webpack工具，使用npm方便很多。不使用npm也可以，但无疑会增加诸多困难。 二，新建一个项目文件夹，在文件夹内打开终端，即Windows下的命令行（Shift+鼠标右键），运行[code] npm init [/code]，如果没有特殊要求，可一直按回车键到最后一步。 三，在终端内执行如下命令下载需要的所有依赖和工具。 四，配置webpack配置文件。在根目录下，即与package.json同级下新建webpack.config.js文件，在文件内部写入如下内容 目录结构： 对于这份配置文件有如下说明 1，标红的部分可自定义 2，react项目文件可以用js格式，也可以用jsx格式，但是输出文件为在HTML文件中引用的文件，必须为js格式。 3，本配置入口文件在dev目录下，输出文件在dist目录下，具体可自定义配置。 4，module.rules为2.x新增的接口，代替原先使用的module.loaders 5，去掉query会报错，也可将其规则写入package.json文件，具体写法见参考链接 五，在package.json文件scripts部分添加如下代码 注：--content-base参数指定根html文件所在位置。 六，开发阶段在终端使用 npm start 自动编译代码并刷新；使用 npm run build 编译生产环境代码。 注：webpack-dev-server自动编译代码和刷新浏览器并不会将编译后的文件写入磁盘，而是保持在内存中，因此此时在html文件中引入的脚本文件src为"bundle.js"，没有任何路径，如果在webpack.config.js的ouput中指定了"publicPath"，情况又有所不同，详见参考链接第三个。 附：webpack编译过程中常用的参数，可在scripts编译命令中分别配置 [list] [*]webpack 开发环境下编译[/*] [*]webpack -p 产品编译及压缩[/*] [*]webpack --watch 开发环境下持续的监听文件变动来进行编译(非常快!)[/*] [*]webpack -d 引入 source maps[/*] [/list] eslint支持： 新建一个.eslintrc文件，写入react支持基本参数 推荐安装编辑器对应的eslint插件，可以在界面实时显示错误信息。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。