webpack2 热加载js 文件
如果只要普通的热加载 只要如下配置就好了
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 文件的更多相关文章
- 动态加载js文件
由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图, 于是就想的比较简单, var script = docume ...
- 网页加载速度优化2--先加载css,然后再加载js文件。
网页加载时,是按从上到下,从左到右的顺序加载的.所以一定要先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件,js一般都是处理功能的,所以不需要提前加载.先给用户观感,再给用户上 ...
- 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
- ExtJS4.x动态加载js文件
动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...
- Ext JS学习第十天 Ext基础之动态加载JS文件(补充)
此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...
- 如何动态加载js文件,$.getScript()方法的使用
有时候我们需要动态在页面中加载js文件,jquery封装了getScript()方法,不用自己再创建标签了. 写法: $.getScript("name.js",function( ...
- angularLoad(用以异步加载js文件)
angularLoad(用以异步加载js文件) 使用方法: 1.执行命令 下载 lib npm install angular-load --save 2.index.html引用js <scr ...
- 在HTML页面中加载js文件和css文件的方法
1.在HTML页面加载js文件的方法: function loadScriptFile(filePath){ var script = document.createElement("scr ...
- 网页性能优化之异步加载js文件
一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...
随机推荐
- bzoj 4773: 负环——倍增
Description 在忘记考虑负环之后,黎瑟的算法又出错了.对于边带权的有向图 G = (V, E),请找出一个点数最小的环,使得 环上的边权和为负数.保证图中不包含重边和自环. Input 第1 ...
- 第八周 yukun 20155335
- 编译zpool命令
环境:192.168.50.239(在 illumos源码中编译zpool命令) PS:由于对zpool命令的工作原理不熟悉,所以编译,可在其中加入调试语句来明白其原理 首先介绍 illumos-so ...
- css position的值
值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", " ...
- Python阶段复习 - part 4 - 用户登录程序
简易版: #!/usr/bin/env python # _*_ coding:UTF-8 _*_ # __auth__:Dahlhin import sys userinfo = r'userinf ...
- shellcheck 帮助你写出更好的脚本
简介 shellcheck 是一款实用的 shell脚本静态检查工具. 首先,可以帮助你提前发现并修复简单的语法错误,节约时间.每次都需要运行才发现写错了一个小地方,确实非常浪费时间. 其次,可以针对 ...
- python基础===两个list之间移动元素
首先我们先了解一下list的几个常用函数: a = [123,456,"tony","jack"] #list中增加元素a.append("www&q ...
- golang锁记
golang中有两个锁实现 atomic的CAS实现锁 首先是inter cpu,熟悉汇编的人都知道,inter指令集有个lock,如果某个指令集前面加个lock,那么在多核状态下,某个核执行到这个前 ...
- 006 Java并发编程wait、notify、notifyAll和Condition
原文https://www.cnblogs.com/dolphin0520/p/3920385.html#4182690 Java并发编程:线程间协作的两种方式:wait.notify.notifyA ...
- C++11——Use auto keyword in C++11
版权声明:本文系原创,转载请注明来源. Compile your program with: g++ -std=c++ -o target_name filen_ame.cpp or: g++ -st ...