Use webpack together with browser-sync

Here are some tips about using webpack and Browsersync to improve working speed.

Browsersync

Browsersync makes your browser testing workflow faster by synchronising URLs, interactions and code changes across multiple devices. 
npm install browser-sync@2.7.1 -g

Proxy

browser-sync start --proxy localhost:8888 --port 4000 --files index.html --files src/*

Used to proxy ajax request to back-end server.

Webpack

With webpack, don't need require.js and require-react-plugin loading in index.html. Very useful to me. 
npm install webpack -g

Work together

npm install -g browser-sync-webpack-plugin And config webpack.config.js:

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
    publicPath: './dist/',
    path: './dist/',
    filename: 'bundle.js',
    pathinfo: true
},
resolve: {
    root: '.'
},
module: {
    loaders: [
    {test: /\.js/, loader: 'jsx-loader?harmony'}
    ]
},
plugins: [
    new BrowserSyncPlugin({
    host: 'localhost',
    port: 4000,
    proxy: 'localhost:8888',
    files: 'src/*',
    files: 'index.html'
})
]
};
时间: 2024-10-31 04:39:37

Use webpack together with browser-sync的相关文章

FireFox导入导出收藏夹和Cookies的方法

FireFox是一个常用的浏览器,扩展插件众多,和IE相比有很多优点,不过有些细小的地方似乎考虑的不太好,比如用户经常会碰到系统重新安装等问题,这就需要导入导出FireFox浏览器的Cookies和收藏夹,然而遗憾的是,FireFox默认只提供了导入IE的Cookies和收藏夹的功能,经过一些尝试,我这里找到一个手动导入导出FireFox的Cookies和收藏夹的方法. 首先,打开"我的电脑",点"工具"-"文件夹选项"-"查看&quo

Google Web开发最佳实践(二)

本指南逐步引导你使用 Web 新手开发包创建新站点,帮助你充分利用 Web 新手开发包提供的工具. 1.开发环境配置 本人环境为win7x64.需要安装以下环境. 安装NodeJS(同时会安装NPM): 安装Ruby(需要大于1.8.7版本),然后安装sass:gem install sass(楼主安装了好几次都提示连接错误,最终还是装上了...). 下载新手开发包:https://developers.google.com/web/starter-kit/,解压进入该目录,执行: npm in

自动化测试技巧之结果验证

自动到了京城,已经两月没有好好整理下自己的思路了,也没有好好的写一些东西了.现在,真应该回归了.因为有的东西,不吐不快. --------------------------------------------------------------- 在这里整理下关于自动化测试技巧中的结果验证的一些东西吧,这块也是我当年一个一个坑走出来的,虽然现在还有很多坑在等着我. 在我们编写测试脚本的过程中,很多时候总会不知道该怎么去判断我们的结果是否正确.因为有一些操作涉及图形.一些操作涉及页面窗口变化.一

FireFox导入导出Cookies和收藏夹的方法

  FireFox是一个常用的浏览器,扩展插件众多,和IE相比有很多优点,不过有些细小的地方似乎考虑的不太好,比如用户经常会碰到系统重新安装等问题,这就需要导入导出FireFox浏览器的Cookies和收藏夹,然而遗憾的是,FireFox默认只提供了导入IE的Cookies和收藏夹的功能,经过一些尝试,我这里找到一个手动导入导出FireFox的Cookies和收藏夹的方法. Cookies: 首先,打开"我的电脑",点"工具"-"文件夹选项"-&

你知道多少的常用GOOGLE 产品

其实谷歌的产品真的很多,而有的是真的没有听说过,那么,你有几个你未曾听说够的谷歌产品呢? 必备 01.谷歌阅读器(Google Reader) :可谓是网页版的RSS阅读器,方便订阅,组织和分享新闻.并且已经有手机版. 02.个性化主页( iGoogle) :在上面显示了Gmail,日历,天气,新闻等等,还有多模板. 03.谷歌相册服务(Google Picasa) :该服务提供照片的下载和编辑软件,只要用这个软件Email,就可以上传,张贴照片到你的博客,但是你也可以直接使用网络相册. 04.

浅谈OCR之Onenote 2010

原文:浅谈OCR之Onenote 2010 上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的更新.维护,可以说是潜力很大,值得期待.由上一次的测试结果也可以看出,Tesseract的OCR结果还不是很理想,尤其是中英文混合的文字,其识别率有限.本次我们来关注下Office 2010中的Onenote,调用其API来测试OCR功能. PS:在公司经理一直推荐使用MyBase来记录工作中遇到的

AngularJS 实践:应用开发 :: ENA13 价格条码-(五)

上节我们完成了基本用户交互工作,这一个我们将要完成用户表单输入,和数据列表等.相关联 AngularJS 的核心知识包括:Scopes 对象(What are Scopes),Data Binding,Controller以及 UI Router State Manager等. 上节回顾 AngularJS 实践:应用开发 :: ENA13 价格条码-(四) 本节代码获取 如果已经 Clone 了代码库,你只需要执行 git checkout codetrip-2 $ git clone htt

AngularJS 实践:应用开发 :: ENA13 价格条码-(四)

上节我们做了个 Hello AngularJS,这一节我开始构建用户界面和用户操作控制等. 上节回顾 AngularJS 实践:应用开发 :: ENA13 价格条码-(三) 本节我将使用 Bootstrap HTML, CSS, and JS 框架,相关知识请参考官网文档 Bootsrap Getting Started 本节代码获取 如果已经 Clone 了代码库,你只需要执行 git checkout codetrip-1 $ git clone https://code.aliyun.co

AngularJS 实践:应用开发 :: ENA13 价格条码-(三)

上一节我们完成了开发工作流工具和环境准备,这一节我们将进行渐进式应用编程.熟悉 AngularJS 开发的同学请跳过. 上一节参考: AngularJS 实践:应用开发 :: ENA13 价格条码-(二) 获取本节代码 https://code.aliyun.com/passpile/pricebarcode 添加 web 应用所依赖的 JavaScript, Stylesheet 引用 编辑 index.html 添加 bootstrap 和 font-awesome 的 CSS 库引用 添加

毛里求斯成为安置Google缓存服务器的非洲国家

美国作家马克·吐温说"上帝先创造了毛里求斯,再按此创造了伊甸园".毛里求斯,这个位于马达加斯加岛东岸的发展中岛国,将成为第二个安置Google缓存服务器的非洲国家.目前Google缓存服务器已经安装和配置成功,将在今年9月开始运行. 肯尼亚是安置Google缓存服务器的第一个非洲国家,而毛里求斯以其国际互联性成为非洲地区理想的互联网连接枢纽,为非洲地区提供信息和通信基础架构的互联.毛里求斯国家计算局(NCB)主席Suraj Ramgoolam表示:"安置这些缓存服务器将使毛里