webpack学习(五)

本节一起学习一下,在我们的项目中安装第三方库进行使用,然后用webpack打包。
1.我们安装一个jquery库

npm install jquery --save-dev

安装成功后,可以在package.json文件中看到安装的版本号:


图1:package.json

2.下面在main.js中引用这个库,并且进行方法的调用

*main.js*
require('../css/style.css')
var tryStr = require('./subMethod.js')
var $ = require('jquery')   //直接引用jquery并赋值给$(jquery的标志符号,你也可以自己命名一个)

document.write(tryStr())

// 调用jquery方法,,进行内容,样式的更改
$('body').html('引入jquery后内容变化').css({'background-color':'#0000ff'})

3.运行打包命令webpack后,打开index.html文件查看,引入的内容是否生效。


图2:打包

图3:index.html运行结果
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 全局安装webpack 全局安装webpack会有个问题,就是当你有两个项目依赖于不同版本的webpack,就会有...
    説好的妹紙呢阅读 1,899评论 0 11
  • 我们在开发的时候,如果只是进行简单的配置,那么我们每一次修改代码,都要手动的进行打包,然后手动的刷新浏览器,这样的...
    kim_jin阅读 242评论 0 0
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,342评论 4 31
  • 我们使用webpack-dev-server并没有把打包生成的dist目录,而是我们将生成的文件放在了内存中,从而...
    kim_jin阅读 433评论 0 0
  • 本文主要分为:环境配置使用配置文件CSS 处理ES6 代码编辑文件压缩SASS 处理CSS 与 JS 分离文件处理...
    _月光临海阅读 524评论 0 1