react及时热更新开辟环境搭建

2019年8月25日 147次阅读 来源: Ajaxyz

搭建一个react及时热更新开辟环境，当代码变动时，能够不必重新启动webpack打包文件，如许会很大地进步我们的开辟效力。

运用东西

  • vscode编辑器，能够及时git推送更新自带git敕令行，随便下载种种言语框架代码格式化高亮插件

  • chrome ^58浏览器机能稳固，轻易及时调试bug

  • node ^7 自带npm包管理东西和js背景运转环境

  • git bash 敕令行东西，轻易敕令行敕令输入

搭建开辟环境

1.竖立文件夹，初始化npm设置文件
$ mkdir react-1 && cd react-1 && npm init
2.装置react react-dom react-router react-router-dom必备的中心模块
$ npm i --save react react-dom react-router react-router-dom
3.全局装置webpack webpack-dev-server
用于打包文件和竖立一个及时更新的服务器体系,而且能够运用webpack敕令行
$ npm i -g webpack webpack-dev-server
4.项目文件夹下面装置webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react等开辟用模块，babel有关的用来转码es6 和jsx语法

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

5.设置webpack.congfig.js文件指定好加载器和进口文件途径打包后的文件途径文件名。

//webpack.config.js
var webpack = require('webpack')
var path = require('path')
module.exports = {
    context: __dirname + '/src',
    entry: "./js/index.js",
    devServer: {
        inline: true
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        }]
    },
    output: {
        path: __dirname + '/output/',
        filename: 'bundle.js'
    }
}

文件目次以下《react及时热更新开辟环境搭建》
注重此时打包后bundle.js文件存在于内存中所以在index.html中只能用src="./bundle.js"援用.不能加上相对途径文件夹output/!

如许我们在敕令行输入webpack-dev-server 翻开浏览器输入天生的网址，就会自动在变动代码后，及时革新浏览器。完成react开辟环境搭建。其他的自动翻开浏览器，支解代码等功能，能够参考webpack官网指南。

    原文作者：Ajaxyz
    原文地址: https://segmentfault.com/a/1190000009322064
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞