webpack window 添加第三方库

简介: 有的时候还想来点jquery,moment,undersocre之类的库,webpack可以非常容易的做到这一点,有谣言说Bower即将停止开发了, 作者推荐都使用npm来管理依赖。那么我们现在安装在我们的app中添加jquery和moment的支持。

有的时候还想来点jquery,moment,undersocre之类的库,webpack可以非常容易的做到这一点,有谣言说Bower即将停止开发了, 作者推荐都使用npm来管理依赖。那么我们现在安装在我们的app中添加jquery和moment的支持。


npm install jquery moment --save-dev

注释掉之前的index.js的代码,在index.js中加上


var sub = require('./sub');
var $ = require('jquery');
var moment = require('moment');
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(sub());
$('body').append('<p>look at me! now is ' + moment().format() + '</p>');

看看浏览器,成功! jquery和moment现在都起作用了!

效果:

目录
相关文章
|
Web App开发
webpack window dev-server配置
1.安装webpack dev-server   npm install --save-dev webpack webpack-dev-server 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
805 0
|
前端开发 索引
webpack window 安装loader
1.安装loadernpm install css-loader style-loader --save-dev 2.配置loader,在webpack.config.js中 module: { loaders: [ { test: /\.
862 0
|
前端开发 索引
webpack window 使用sass来编译css样式
1.执行安装: npm install sass-loader --save-dev (此处不行的话就换上npm install node-sass) 2.稍微修改一下config,删掉我们先前添加的css规则,加上下面的loader { test: /\.
989 0
webpack window 处理图片和其他静态文件
安装url-loadernpm install url-loader --save-dev配置config文件      {        test: /\.(png|jpg)$/,        loader: 'url?limit=40000'      }注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片。
781 0
webpack window 添加ES6支出
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。作者:张轩链接:http://zhuanlan.zhihu.com/p/20367175来源:知乎如果现在你的项目还没有对ES6的语法支持,那就有点没有逼格了,其实大家都知道这个也很简单,因为我们有伟大的Babel 首先 装各...
927 0
|
Web App开发 JavaScript 索引
webpack window下配置的hello world
峰回路转 一区九折 先看效果:(此效果是webpack执行完之后会生成build文件夹已经它下面的index.html,点击index.html就是下图的效果) 安装先装好node和npm,因为webpack是一个基于node的项目。
907 0
|
2月前
|
JavaScript
webpack打包TS
webpack打包TS
132 60
|
1月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
1月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
|
1月前
|
缓存 前端开发 JavaScript
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命