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文件,网页中直接作用<script src="build/bundle.js"></script>来调用即可
本地开发调试
先安装 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,加入如下代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tests</title>
</head>
<body>
<div id="react-content"></div>
<script src="./bundle.js"></script>
</body>
</html>
在浏览器中打开 http://localhost:8080 就可以实时查看效果,修改后代码后,需要刷新才能查看到效果。执行npm run build可以打包,相当于执行webpack命令
Cannot GET / 错误
是由于package.json中的
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
build文件夹不存在
配置react和babel
安装react
npm install react --save
安装babel相关组件,让webpack自动转换jsx,
npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
在webpact.config.js的module的loaders中增加相应配置
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015']
}
}
]
}
配置完成后,在js或jsx文件中就可以直接写jsx语法
babel编译es6和jsx
先安装babel-cli
npm install -g babel-cli
再执行
babel src -d dist --presets react,es2015
src 为源文件目录,dist为编译输出目录,--presets 预置插件
支持es7语法
es7语法分四个阶段分别对应四个插件
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
选择一个加载就能正确解析es7语法
配置.less
先安装less编译器
npm install less css-loader less-loader style-loader --save-dev
在webpact.config.js的module的loaders中增加相应配置
{test: /\.less$/,loader: "style!css!less"}
配置图片及字体文件
安装url-loader,修改webpact.config.js的module的loaders中增加相应配置
{test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}
react,babel只能安装在当前目录,安装在全局无效,提交到github时需要把这些模块排除掉
npm安装依赖
在当前目录执行npm install会根据当前目录下的package.json文件,把需要的依赖都下载安装
npm升级到3
npm install npm@3.0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'uxcore'; ReactDOM.render(<Button />, document.getElementById('example'));
const path = require('path'); module.exports = {
entry: './src/index.jsx', module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015']
}
}
]
} , output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
webpack打包调试react并使用babel编译jsx配置方法的更多相关文章
- React系列文章:Babel编译JSX生成代码
上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...
- Webpack打包构建太慢了?试试几个方法
Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...
- Webpack打包css后z-index被重新计算的解决方法
发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...
- webpack 打包调试
本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶. 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hell ...
- 在react项目中启用mobx的配置方法
1.安装插件 npm install --save-dev babel-preset-mobx mobx mobx-react 2.package.json配置 "dependencies& ...
- webpack 打包图片资源
webpack 打包图片资源 /** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 */ // 用来拼接绝对路径的方法 const {res ...
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...
- React项目构建(利用webpack打包)
引言 最近React作为当前最为火热的前端框架.最近也相继而出来相关ES7的新语法. 当然,在使用React开发web项目的时候,不得不提到的就是与之配套的相应的打包技术,之前上文已经简单的提到Rea ...
- 成功解决react+webpack打包文件过大的问题
最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...
随机推荐
- OAuth2.0实战之微信授权篇
微信开发三大坑: 微信OAuth2.0授权 微信jssdk签名 微信支付签名 本篇先搞定微信OAuth2.0授权吧! 以简书的登陆页面为例,来了解一下oauth2.0验证授权的一些背景知识: 1) 传 ...
- Eclipse中创建Maven多模块工程
1.先创建父项目 在Eclipse里面New -> Maven Project: 在弹出界面中选择“Create a simple project” 这样,我们就按常规模版创建了一个Maven工 ...
- SAP升级ECC6.0 引起的一个事故
上个月底,公司的SAP系统升级到了ECC6,在升级时,我们进行了所有关联系统的集成测试,当时没有发现什么问题. 过了2周,需要从SAP下载对账单了,这个时候问题出现了,很多分公司的数据下载失败.和SA ...
- mysql开发常用小结
1.时间转换 时间戳转时间 FROM_UNIXTIME 比如 FROM_UNIXTIME(1449480551/1000,'%Y-%m-%d %H:%i:%s') 如果是精确到毫秒的时间戳,则必 ...
- php,perl计算crc
PHP版: <?php echo getCrc32("/var/www/html/resource/koc_data/2013_03/01/1ck65e.koc") ; # ...
- JQuery九大选择器
九大选择器都是用来查找元素节点的.JQuery给我提供了九中类型的选择器. 1. 基本选择器 基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名来查找DO ...
- 深度学习attention 机制了解
Attention是一种用于提升基于RNN(LSTM或GRU)的Encoder + Decoder模型的效果的的机制(Mechanism),一般称为Attention Mechanism.Attent ...
- css 温故而知新 字体方向 将文字竖着显示
writing-mode: vertical-rl;
- GIT 简单版
Git规范 by 程序亦非猿 2016.4.6 这又是一篇我在公司分享的,想制定一下Git的规范,有兴趣的可以看看~ 上一篇在这里 分支模型 每个项目必须要有master.develop分支. 每个开 ...
- SQL Server 自增字段归零
方法一: 如果曾经的数据都不需要的话,可以直接清空所有数据,并将自增字段恢复从1开始计数 truncate table 表名 方法二: DBCC CHECKIDENT (''table_name'', ...