build怎么调试 react_webpack打包调试react并使用babel编译jsx配置方法

http://lxj8749.iteye.com/blog/2287074

**********************************************

安装webpack

npm i webpack --save-dev

如果使用 -g参数，可以安装到全局使用，在当前目录安装，可执行文件为 ./node_modules/.bin/webpack

配置webpack.config.js

var path = require('path');

module.exports={

entry: path.resolve(__dirname,'src/index.js'),

output: {

path: path.resolve(__dirname,'build'),

filename:'bundle.js',

};

entry为打包的入口文件，output为打包后生成的文件名及路径。

源代码可以编写成多个文件，然后由入口文件调用组装，相互独立的组件最好分别单独写在一个文件中

打包源文件

在当前目录执行webpack 或 ./node_modules/.bin/webpack 命令，就可以将源文件打成生成build/bundle.js文件，网页中直接作用来调用即可

本地开发调试

先安装 webpack-dev-server

npm i webpack-dev-server --save

在package.json文件中scripts下面添加相应的配置(可以使用npm init来生成package.json文件)

{"scripts": {"build": "webpack","dev": "webpack-dev-server --port 8080 --inline --content-base ./build"}

}

--inline加入该参数可以实现自动刷新，

在当前目录执行 npm run dev,执行完成后，在文件夹build中新建index.html，加入如下代码

tests

build怎么调试 react_webpack打包调试react并使用babel编译jsx配置方法相关推荐

webuploader 怎么在react中_另辟蹊径搭建阅读React源码调试环境支持所有React版本细分文件断点调试...
引言(为什么写这篇文章) 若要高效阅读和理解React源码,搭建调试环境是必不可少的一步.而常规方法:使用react.development.js和react-dom.development.js调试 ...
使用Gradle整合SpringBoot+Vue.js-开发调试与打包
为什么80%的码农都做不了架构师?>>> 非常感谢两位作者: kevinz分享的文章<springboot+gradle+vue+webpack 组合使用> 首席卖 ...
Windows 10 安装 Android Studio 安装创建APP 创建模拟器调试真机调试编译签名打包APP
要想使用Android Studio开发android APP,需要安装三个工具:JDK.Android Studio.Android SDK 先了解这三个工具是做什么的 JDK:JDK是Java语言 ...
使用uniapp开发APP时的调试/安卓打包等
一.调试 1.先用数据线连接电脑和手机,选择"文件传输", 2.打开开发者模式,华为手机举列-->设置-->关于手机-->版本号,多次连续点击"版本号& ...
如何用微信web开发者工具测试调试并打包上传小程序
厦门四六开科技给大家讲讲如何用微信web开发者工具测试调试并打包上传小程序,其实还是很简单的,这个教程针对小白,大神请直接略过. 一.下载并安装软件(根据自己电脑实际情况选择版本安装) 如何用微信开 ...
adb调式问题总述（oppo小游戏【快应用】打包调试）
adb调式问题总述(oppo小游戏[快应用]打包调试) 一,什么是adb 二,adb有什么用三,adb的安装四,adb常用操作命令五,adb调试常见错误 ①adb devices 时显示List ...
VC代码的编写和调试---编写易于调试的VC代码
转自:http://www.vcgood.com/forum_posts.asp?TID=1692&PN=1 一程序的设计要避免错误,首先要从好的设计开始.对于程序的设计,需考虑到程序的两 ...
core部署iis的调试net_远程调试远程 IIS 计算机上的 ASP.NET Core - Visual Studio | Microsoft Docs...
在 Visual Studio 中远程调试远程 IIS 计算机上的 ASP.NET CoreRemote Debug ASP.NET Core on a Remote IIS Computer in ...
安卓逆向_12 --- jeb工具的使用 ( 动态调试 smali 代码【普通调试和 debug调试】)
From:https://www.52pojie.cn/forum.php?mod=viewthread&tid=742250 jeb 动态调试 smali 代码:https://www.bi ...

build怎么调试 react_webpack打包调试react并使用babel编译jsx配置方法

build怎么调试 react_webpack打包调试react并使用babel编译jsx配置方法相关推荐

最新文章

热门文章