如果只要普通的热加载 只要如下配置就好了

package.json

{
"devDependencies": {
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
},
"scripts": {
"start": "webpack-dev-server"
}
}

webpack.config.js

module.exports = {
entry: __dirname + '/js/test.js',
output: {
// 注意这里是 publicPath
publicPath: "/dist/",
filename: "bundle_test.js"
}
}

若要使用 es6 的语法, 需加载babel 文件, 注意要先安装 babel-cli

package.json 如下:

{
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
},
"scripts": {
"start": "webpack-dev-server"
}
}

webpack.config.js 如下:

module.exports = {
entry: __dirname + '/js/test.js',
output: {
publicPath: "/dist/",
filename: "bundle_test.js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.js$/,
loader: "babel-loader"
}
]
}
}

并且还要加一个 .babelrc 文件, 如下:

{
"presets": ["es2015", "react"]
}

webpack2 热加载js 文件的更多相关文章

  1. 动态加载js文件

    由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图, 于是就想的比较简单, var script = docume ...

  2. 网页加载速度优化2--先加载css,然后再加载js文件。

    网页加载时,是按从上到下,从左到右的顺序加载的.所以一定要先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件,js一般都是处理功能的,所以不需要提前加载.先给用户观感,再给用户上 ...

  3. 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  4. ExtJS4.x动态加载js文件

    动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...

  5. Ext JS学习第十天 Ext基础之动态加载JS文件(补充)

    此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...

  6. 如何动态加载js文件,$.getScript()方法的使用

    有时候我们需要动态在页面中加载js文件,jquery封装了getScript()方法,不用自己再创建标签了. 写法: $.getScript("name.js",function( ...

  7. angularLoad(用以异步加载js文件)

    angularLoad(用以异步加载js文件) 使用方法: 1.执行命令 下载 lib npm install angular-load --save 2.index.html引用js <scr ...

  8. 在HTML页面中加载js文件和css文件的方法

    1.在HTML页面加载js文件的方法: function loadScriptFile(filePath){ var script = document.createElement("scr ...

  9. 网页性能优化之异步加载js文件

    一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...

随机推荐

  1. Activity与Service的回收

    Android开发中,一个Application,运行在一个进程中.这个Application的各种组件(四种组件),通常是运行在同一个进程中的.但是,并不是绝对的.由于某种需求,比如,你可以设置Ap ...

  2. [BZOJ1101&BZOJ2301][POI2007]Zap [HAOI2011]Problem b|莫比乌斯反演

    对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d. 我们可以令F[n]=使得n|(x,y)的数对(x,y)个数 这个很容易得到,只需要让x, ...

  3. [BZOJ1076][SCOI2008]奖励关解题报告|状压DP

    你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不吃(必须在抛出下一个宝物之前做出选择,且现在决定不吃的宝物以后也不能再吃). 宝 ...

  4. 消息队列之 ActiveMQ(山东数漫江湖)

    简介 ActiveMQ 特点 ActiveMQ 是由 Apache 出品的一款开源消息中间件,旨在为应用程序提供高效.可扩展.稳定.安全的企业级消息通信. 它的设计目标是提供标准的.面向消息的.多语言 ...

  5. TDD随想录

    TDD随想录 谨以本文献给TDD的开创者与传播者 本文纯属个人经历,如有雷同纯属巧合 我从不觉得自己是一个好的程序员,甚至可能连合格都谈不上,不过在内心深处我却渴望着在编程这件事上获得成功. 可惜每次 ...

  6. js_参数的get传输,从一个页面到另外一个页面。

    2017年10月31日,今天是万圣节,欢乐谷搞事情. 刚接触前端那会是分不清,前端和后台的,后台的数据如何传输到前端的. 现在用的还是Jquery的ajax请求后台数据到前端页面的,需要学习的地方还有 ...

  7. hdu 1599 find the mincost route (最小环与floyd算法)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1599 find the mincost route Time Limit: 1000/2000 MS ...

  8. $.on方法与$.click()的区别

    1.$.on("click") 支持动态元素绑定事件,该事件是绑定到document上,只要符合条件的元素即可绑定事件,同时$.on()可以绑定多个事件 on方法 on(event ...

  9. Perl6 Bailador框架(5):利用正则匹配路径

    use v6; use Bailador; =begin pod 我们在路径设置上, 可以利正则表达式捕获的字符串作为子例程参数 =end pod get '/perl6/(.+)' => su ...

  10. linux下进行base64编码解码

    1.编码 2.解码