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

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. 网络设备之pci_device_id

    标准PCI设备都有一个配置寄存器,用来存储各种参数: /* pci设备配置寄存器 */ struct pci_device_id { /* 厂商id,设备id */ __u32 vendor, dev ...

  2. 自动化测试===Macaca环境搭建,自我总结

    安装jdk 安装安卓sdk(打开sdk的时候出现问题linux===启动sdk manager下载配置sdk的时候报错的解决办法) 安装gradle,配置环境变量(MACACA===gradle下载和 ...

  3. (二十)ubuntu的recovery mode解决用户一些实际问题

    遇到的问题如下: 1.在当前用户下使用sudo来直接修改password等几个文件,一旦修改了passwd,用户名发生了变化,其他的用户组.密码等却没有对应的配置,就再进不了该用户了. 2.忘记用户密 ...

  4. myeclipse安装插件phpeclipse后进行PHP代码编写

    平常一般写java代码,有时也捣腾一下php,原来安装过zend studio来编写php代码,无奈电脑越来越卡,于是卸载了zend,然后在myeclipse中安装phpeclipse这款插件来完成p ...

  5. [New learn] 网络基础-apache本地服务搭建(支持php)

    1.简介 无网不利,无网不胜.对于移动应用来说离开网络那和咸鱼有什么分别?所以对于开发者来说更要学习好网络开发的技术. 2.搭建apache本地服务器 1.在finder中显示影藏的用户文件夹 fin ...

  6. [Think] position与anchorPoint关系

    1.简介: 最近在学习动画,所以接触到了CAlayer类. 其中的position与anchorPoint关系一感觉一头雾水,网上有篇文章 彻底理解position和anchorPoint关系  里面 ...

  7. 全国省市区数据SQL - 省市区

    转载:https://www.cnblogs.com/flywind/p/6036801.html

  8. elasticsearch批量索引数据示例

    示例数据文件document.json(index表示在索引中增加或替换现有文档,create表示如果文档不存在则添加文档,delete表示删除文档): { "index": { ...

  9. ubuntu 软件包(package)更换源(source)为阿里云镜像 update&upgrade

    在ubuntu下用apt-get install安装软件时,发现package list中没有所需的软件, 估计可能是package list太旧了,于是需要apt-get update & ...

  10. 使用JavaScript实现长方形、直角三角形、平行四边形、等腰三角形、倒三角、数字三角形

    [循环嵌套的规律]    1.外层循环控制行数,内层循环控制每行中元素的个数. [图形题思路]    1.确定图形有几行,行数即为外层循环次数:    2.确定每行中有几种元素组成,有几种元素表示有几 ...