webpack 2.x配置reactjs基本开发环境详解

 更新时间:2017年08月08日 11:33:24   作者:rouji  
本篇文章主要介绍了webpack 2.x配置reactjs基本开发环境详解,具有一定的参考价值,有兴趣的可以了解一下

本文介绍了webpack 2.x配置reactjs基本开发环境详解,分享给大家,具体如下:

当前webpack版本:2.2;react: 15.4.2

webpack从1.x升级到2.x替换了几个接口,包括module.loaders这样的重要接口已被弃用(详细变更)。官网目前已不推荐使用1.x版本,早上折腾一番,根据2.2版本配置了react基本的开发环境,满足不太复杂的web应用开发,后期会逐步优化配置文件。

如果您之前使用过webpack,需要改动的地方并不大。下文假定您没有接触过类似的打包工具(但了解npm、jsx再好不过),以跟我一样一个新手的身份认识这些,如有不妥之处望不吝赐教。

如果您的react项目是引入的以下三个js文件在浏览器端编译jsx,那么不需要用webpack做开发环境。

 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

但是在产品上线阶段,我们很不推荐这样做。1,用户需要下载这三个文件,浪费了带宽;2,下载完成后需要在浏览器端编译jsx文件,浪费了时间和资源。

如果将开发阶段的项目代码打包编译为一个js文件,再推上线,那么:1,将HTTP请求减少为1个;2,不需要用户端再浪费时间和资源去编译,直接运行上线前已编译好的js代码。

如果是前者,引入项目js代码的script标签type值为"text/babel";如果是后者,type值为"text/javascript"。

如何做?

一,安装nodejs,使用它附带的npm包管理工具。为什么要用npm?后期会下载react依赖、babel依赖、webpack工具,使用npm方便很多。不使用npm也可以,但无疑会增加诸多困难。

二,新建一个项目文件夹,在文件夹内打开终端,即Windows下的命令行(Shift+鼠标右键),运行 npm init ,如果没有特殊要求,可一直按回车键到最后一步。

三,在终端内执行如下命令下载需要的所有依赖和工具。

复制代码 代码如下:

npm install react react-dom babel-loader babel-core babel-preset-es2015 webpack webpack-dev-server --save-dev

四,配置webpack配置文件。在根目录下,即与package.json同级下新建webpack.config.js文件,在文件内部写入如下内容

// webpack.config.js
var webpack = require("webpack");
var path = require("path");

module.exports = {
  entry: './dev/entry.jsx', // 入口文件
  devtool: 'source-map',  // 调试时定位到编译前的代码位置,推荐安装react插件
  output: {
    path: path.resolve(__dirname, "./dist/js/"),
    filename: 'bundle.js' // 打包输出的文件
  },
  module: {
    rules: [{
      test: /\.jsx?$/, // test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    // 现在你import文件的时候可以直接使用import Func from './file',不用再使用import Func from './file.js'
    extensions: ['.js', '.jsx', '.json', '.coffee']
  }
};

目录结构:

app
  |__dev
  |  |__components
  |  |__entry.jsx
  |__dist
  |  |__css
  |  |__js
  |    |__bundle.js
  |  |__index.html
  |__node_modules
  |__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部分添加如下代码

 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --hot --open --content-base ./dist/",
  "deploy": "webpack -p --progress --config webpack.config.js"
 },

注:--content-base参数指定根html文件所在位置。

六,开发阶段在终端使用 npm start 自动编译代码并刷新;使用 npm run build 编译生产环境代码。

注:webpack-dev-server自动编译代码和刷新浏览器并不会将编译后的文件写入磁盘,而是保持在内存中,因此此时在html文件中引入的脚本文件src为"bundle.js",没有任何路径,如果在webpack.config.js的ouput中指定了"publicPath",情况又有所不同,详见参考链接第三个。

附:webpack编译过程中常用的参数,可在scripts编译命令中分别配置

  • webpack 开发环境下编译
  • webpack -p 产品编译及压缩
  • webpack --watch 开发环境下持续的监听文件变动来进行编译(非常快!)
  • webpack -d 引入 source maps

eslint支持:

npm i eslint babel-eslint eslint-plugin-react --save-dev

新建一个.eslintrc文件,写入react支持基本参数

{
  "plugins": ["react"],
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parser": "babel-eslint"
}

推荐安装编辑器对应的eslint插件,可以在界面实时显示错误信息。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 浅谈React 属性和状态的一些总结

    浅谈React 属性和状态的一些总结

    下面小编就为大家带来一篇浅谈React 属性和状态的一些总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 使用React-Router实现前端路由鉴权的示例代码

    使用React-Router实现前端路由鉴权的示例代码

    这篇文章主要介绍了使用React-Router实现前端路由鉴权的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • React Native 通告消息竖向轮播组件的封装

    React Native 通告消息竖向轮播组件的封装

    这篇文章主要介绍了React Native 通告消息竖向轮播组件的封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 使用store来优化React组件的方法

    使用store来优化React组件的方法

    这篇文章主要介绍了使用store来优化React组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • React学习之受控组件与数据共享实例分析

    React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下
    2020-01-01
  • 解决webpack -p压缩打包react报语法错误的方法

    解决webpack -p压缩打包react报语法错误的方法

    这篇文章主要给大家介绍了关于解决webpack -p压缩打包react报语法错误的方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 详解React 16 中的异常处理

    详解React 16 中的异常处理

    这篇文章主要介绍了详解React 16 中的异常处理的相关资料,React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃;未被任何异常边界捕获的异常可能会导致整个 React 组件树被卸载,需要的朋友可以参考下
    2017-07-07
  • ReactJS中的自定义组件实例代码

    ReactJS中的自定义组件实例代码

    React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了ReactJS中的自定义组件的代码讲解,需要的朋友可以参考下
    2019-11-11
  • react-router实现按需加载

    react-router实现按需加载

    本篇文章主要介绍了react-router实现按需加载,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 详解如何在react中搭建d3力导向图

    详解如何在react中搭建d3力导向图

    本篇文章主要介绍了如何在react中搭建d3力导向图,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论