React + webpack 环境配置

hellowoody 发布于2019-08-21 16:19 / 3141人阅读

安装配置Babel

babel-preset-es2015 ES6语法包，使代码可以随意地使用ES6的新特性。

babel-preset-react React语法包，专门用于React的优化，在代码中可以使用React ES6 classes的写法，同时直接支持JSX语法格式

安装Babel loader

// 安装babel-core核心模块和babel-loader
npm install babel-core babel-loader --save-dev


// 安装ES6 和 React 支持
npm install babel-preset-es2015 babel-preset-react --save-dev

配置 .babelrc

安装完Babel和它的插件，配置一下它的规则，在根目录下新建一个.babelrc空文件：

// 告诉Babel，编译JavaScript代码的时候要用这两个presets编译
 {
   "preset": ["es2015", "react”]
 }

安装配置ESLint

安装ESLint loader

为webpack添加这个preLoaders（在loader处理资源之前，先用preLoaders进行处理，代码检查在代码转换之前进行）

npm install eslint eslint-loader --save-dev

这里使用Airbnb开发配置合集eslint-config-airbnb，这个配置合集里面还包括以下3个插件：

npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

npm install eslint-config-eslint

配置 .eslintrc

在根目录下新建一个.eslintrc的空文件：

{
   "extends": "airbnb",
   "rules": {
     "comma-dangle": ["error", "never"]
   }
 }

安装配置webpack

配置webpack之前，先安装一个webpack的插件——html-webpack-plugin，它可以帮助我们自动生成HTML页面，并且引入正确的JavaScript文件依赖：

npm install html-webpack-plugin —save-dev

在项根目录下新建一个webpack.config.js文件:

let path = require("path") 
let webpack = require("webpack")
let HtmlwebpackPlugin = require("html-webpack-plugin")
// 一些常用路径
const ROOT_PATH = path.resolve(__dirname)
const APP_PATH = path.resolve(ROOT_PATH, "app")
const BUILD_PATH = path.resolve(ROOT_PATH, "build")

module.exports = {
  entry: {
    app: path.resolve(APP_PATH, "index.jsx")
  },
  output: {
    path: BUILD_PATH,
    filename: "bundle.js"
  },
  // 开启 dev source map
  devtool: "eval-source-map",
  // 开启 webpack dev server
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  },

  modules: {
    // 配置preLoaders, 将eslint 添加进去
    preLoaders: [
      {
        test: /.jsx?$/,
        loaders: ["eslint"],
        include: APP_PATH
      }
    ],
    
    // 配置loader，将Babel添加进去
    loaders: [
      {
        test: /.jsx?$/,
        loaders: ["babel"],
        include: APP_PATH
      }
    ]
  },

  // 配置 plugin
  plugins: [
    new HtmlwebpackPlugin({
      title: "my first react webpack"
    })
  ],
  resolve: {
    extensions: ["", ".js", ".jsx"]
    // 在js中import加载jsx扩展名的脚本
  }
}

添加组件热加载（HMR）功能

npm install babel-preset-react-hrme --save-dev

这个preset里面其实包括两方面：

react-transform-hmr用来实现热加载

react-transform-catch-errors用来捕获render里面的方法，并且直接展示在界面上

配置一下 .babelrc：

{
  "preset": ["es2015", "react"],
  "env": {
    "development": {
      "presets": ["react-hrme"]
    }
  }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88406.html

React系列---Webpack环境搭建（二）不同环境不同配置

摘要：系列环境搭建一手动搭建系列环境搭建二不同环境不同配置系列环境搭建三打包性能优化实际项目中，往往不同环境有不同的构建需求。 React系列---Webpack环境搭建（一）手动搭建React系列---Webpack环境搭建（二）不同环境不同配置React系列---Webpack环境搭建（三）打包性能优化实际项目中，往往不同环境有不同的构建需求。比如开发、测试和生产环境对应的后端接口地...

coordinate35 2019-08-20 17:35 评论0 收藏0
React项目实战：环境搭建

摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。前言前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议：如果对Weex App感兴趣，应该选择vue框架；如果...

cnio 2019-08-21 17:47 评论0 收藏0
React项目实战：环境搭建

摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。前言前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议：如果对Weex App感兴趣，应该选择vue框架；如果...

GHOST_349178 2019-08-01 18:04 评论0 收藏0
最小白的webpack+react环境搭建

摘要：接下来安装和，执行命令安装很顺利，没有遇到任何问题。再总结一下我们遇到的坑初始化时的项目名称要合规，特别是不能出现中划线下划线。另外再增加，这样刷新的速度会大大加快最终的文件目录结构为各文件的最终内容本文也同步发表在我的公众号“我的天空” 从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。最近在玩webpack+rea...

番茄西红柿 2019-04-23 13:28 评论0 收藏0
React系列---Webpack环境搭建（三）打包性能优化

摘要：的选项中，是文件的输出路径是暴露的对象名，要跟保持一致是解析包路径的上下文，这个要跟下面要配置的保持一致。最后修改一下模板，增加引用文件给入口文件再加点依赖模块，方便打包观察运行打包可以看到，入口文件里依赖的，模块，直接引用了。 React系列---Webpack环境搭建（一）手动搭建React系列---Webpack环境搭建（二）不同环境不同配置React系列---Webpack环境...

Jason_Geng 2019-08-20 17:39 评论0 收藏0
构建React开发环境

摘要：使用包管理工具，基于构建工具，搭建开发环境由于一些软件安装跟系统环境相关，故这里查看本文档，需要根据自己的系统环境，选择相对应的系统版本。使用Yarn包管理工具，基于Webpack构建工具，搭建React开发环境 showImg(https://segmentfault.com/img/remote/1460000019833533?w=560&h=310); 由于一些软件安装跟系统...

yck 2019-08-26 10:15 评论0 收藏0