webpack React+ES6
webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的追求。 废话不多,下面就就看下如何从0搭起我们的构建工具。
安装
全局安装webpack,如果安装后还是提示没有webpack commond,可以尝试通过超级管理员身份安装。
$ npm install webpack -g
$ sudo npm install webpack -g
或者在项目里进行安装
$ npm install webpack --save-dev
配置
创建目录
index.js文件内容:
document.write('Hello Webpack');
生成package.json文件,-y为生成默认内容
$ npm init
$ npm init -y
创建webpack.config.js文件
var webpack = require('webpack'); module.exports = { entry: './app/index.js', //入口 output: { //输出
path: 'bundle',
publicPath: '/static/',
filename: 'bundle.js'
}, module: {
loaders: [ //加载器
{test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.js$/, loader: 'babel-loader'},
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
} }
注意输出中有一个path属性和一个publicPath属性,这二者的区别在于path为本地路径,publicPath是你启用服务器(webpack-dev-server/react-hot-loader)时的路径。
在webpack中所以的资源都需要通过加载器加载,多个加载器之间用 ! 隔开,其中-loader的后缀是可以省略的。
webpack.config文件中每个申明的加载器都需要安装,否则运行会报错:
$ npm install style-loader css-loader --save-dev
鉴于一个项目中会有N多个loader,通常将这些loader写入package.json文件的devDependencies属性中,之后通过 $ npm install 命令一次全部安装。
这里选用 babel 加载器来加载我们的JS文件,使用它最少需要安装 babel-core 与 babel-loader。如果想用 babel 解析 ES6 和 React,还需要安装上图中的 babel-preset-es2015 和 babel-preset-react,这个后面再说。
运行
上述配置工作完成后我们来启动webpack
$ webpack
执行该命令后,项目下多了个 bundle 文件夹,里面有输出的 bundle.js 文件
在index.html中引入编译过的bundle.js
<script src="../bundle/bundle.js"></script>
运行index.html文件
这样就完成了基本配置并跑起了第一个DEMO,看下其他比较实用的命令
$ webpack --config xxx.js //使用另一份config文件 $ webpack --watch //自动监听打包 $ webpack -p //压缩混淆脚本 $ webpack -d //生成map映射文件
初上手第二个和第三个命令比较常用,--watch 使得我们不用每更改一次代码就执行一次 $ webpack。-p会压缩打包文件,使得体积减小很多,通常将压缩后的文件发布到线上。
webpack中,所有资源都是通过模块化的方式引入的。其同时支持commonjs和AMD的语法。接下来我们引入css文件。同时别忘记安装 style-loader 与 css-loader。
style.css 内容
body {
color: red;
}
index.js 内容
require('./style.css');
document.write('Hello Webpack');
结果
支持ES6
上文说过要支持ES6,还需要安装babel-preset-2015。
$ npm install babel-preset-es2015
安装好之后修改webpack.config文件如下:
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
这里我们通过在app目录下创建 app.js 文件:
let a = 'ES6 is working!';
export default a;
修改 index.js
import './style.css';
import text from './app.js';
alert(text);
document.write('Hello Webpack');
结果
支持ReactJS
首先安装 react 与 babel-preset-react
$ npm install react react-dom babel-preset-react --save-dev
修改 webpack.config,在preset属性中添加react一项。
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
修改 app.js 内容
import React, { Component } from 'react'; class App extends Component {
render() {
return (
<h1>React is working!</h1>
);
}
} export default App;
修改 index.js 内容
import './style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Title from './app.js'; ReactDOM.render(<Title />, document.body);
结果
这样我们就可以在静态项目里同时使用ES6与React了,下面我们看看如果通过本地服务器实现浏览器自动刷新。
如果你项目中并没有用到React,你可以通过webpack-dev-server来实现自动刷新。如果使用了React,可以使用量身定做的React-hot-loader。
下面来依次说说二者。
webpack-dev-server
安装
npm install webpack-dev-server --save-dev
更改 index.html文件
<script src="static/bundle.js"></script>
此时的路径就是 webpack.config 文件中 publickPath 中设置的
运行
webpack-dev-server
webpack-dev-server --port 3000
服务默认启动8080端口,通过--port命令可以更改端口。这样我们就可以在localhost:3000/index.html访问到我们的页面了。
热刷新
webpack的热刷新分为iframe模式与inline模式
iframe模式操作要简单许多,其并不需要更改配置,只需要访问localhost:3000/webpack-dev-server/index.html。
现在当我们更改 js 文件时浏览器就会自动刷新。
inline模式有兴趣可以去参考文档。
react-hot-loader
安装
npm install react-hot-loader --save-dev
更改 webpack.config 文件,并引入插件。
entry: [
'webpack-dev-server/client?http://localhost:2000',
'webpack/hot/only-dev-server',
'./js/index.js'
],
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel', 'react-hot'],
}]
}
创建 server.js 文件
var webpack = require('webpack'),
WebpackDevServer = require('webpack-dev-server'),
config = require('./webpack.config'); new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Listening at http://localhost:3000/');
});
使用命令启动
node server.js
也可以写入 package.json 中
"scripts": {
"start": "node server.js"
}
运行
npm start
这样React项目就可以实现热刷新了,不过在实际使用过程中还是会遇到各种坑。这里引入个完整的官方DEMO,亲测可用,文档也非常简洁明了。
https://github.com/gaearon/react-hot-boilerplate
webpack React+ES6的更多相关文章
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- webpack + react + es6, 并附上自己碰到的一些问题
最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...
- Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- Webpack+React+ES6 最新环境搭建和配置(2017年)
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- webpack学习(六)—webpack+react+es6(第3篇)
接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...
- webpack学习(六)—webpack+react+es6(第2篇)
接上篇 webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...
- webpack学习(五)—webpack+react+es6(第1篇)
如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...
- 一分钟搭建Webpack+react+es6框架
最近react刷屏的厉害,而随着它一起走进我们视野的还有webpack,webpack只是个工具,为什么如此火呢?因为简单好了不废话. 直接进入正题: 打开命令行工具: npm install - ...
随机推荐
- SilkTest天龙八部系列6-用open agent进行测试
SilkTest支持两种测试模式,一种是用classic agent,另一种就是用我们今天要介绍的open agent. open agent可以提供和classic agent差不多的录制回放功能. ...
- 一款简单的客户端安卓手机qq源码
给大家分享一款比较简单的安卓手机qq应用源码,效果非常不错,大家可以借鉴一下,希望大家会喜欢. 1.png (7.24 KB, 下载次数: 0) 02.png (68.52 KB, 下载次数: 0 ...
- QtSoap调用Web Service(QtSoap是非官方应用)
今天学习如何用QtSoap访问Web Service服务.这里调用的是查询QQ在线状态的服务qqOnlineWebService.调用的几个步骤: 1.创建QtSoapMessage对象 messag ...
- mysql tcp 4层负载
-bash-4.1# cat /etc/haproxy/haproxy.cfg global log 127.0.0.1 local3 maxconn 65535 chroot /usr/local/ ...
- haproxy /admin跳转 不会在接口上再次加上admin
http://www.xx.com/admin/api/menu [root@wx03 mojo]# cat test.pl use Mojolicious::Lite; use JSON qw/en ...
- C# - MemoryStream
代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
- BZOJ 3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛( dp )
水题...忘了取模就没1A了.... --------------------------------------------------------------------------- #incl ...
- PHP把数字ID转字母ID
PHP把数字ID转字母ID ID是网站中经常出现的,它一般是数字,但是我们发现现在的网站很多ID都是字母了,比如YouTube的视频播放页它的URL类似/watch?v=yzNjIBEdyww. 下面 ...
- Eclipse用法和技巧八:自动添加try/catch块1
站在编译器的角度来看,java中的异常可以分为两种,已检查异常和未检查异常.对于已检查异常比如IO操作,编译器会要求设置try/catch语句块,在eclipse中也只要使用帮助快捷键ctrl+1,就 ...
- call、apply以及bind
call与apply都可以改变js的this指向,两者最主要的区别就是使用时传参的不同,apply的参数可以以数组的形式传进来,但是call方法的参数必须要一个一个的传进来,就像这样. func.ca ...