本章描述的主要功能
- 引入jq模块
- expose-loader 简单介绍
- 提供公共模块
- tpl模版的介绍(使用ejs语法)
代码接着上一章webpack学习笔记(二)环境分离+多页面开发配置
引入jq模块
各种基于mvc、mvvm框架的出现,单纯的jq已不适合这样的开发了,但如果是不使用框架的项目,使用jq总比写原生好吧0.0
既然都使用了webpack来开发,就不要使用<script>
来引入
npm i -D jquery
然后回到index.js
文件,通过require('jquery')
引入jquery
,顺便在index.html
里面随便写点什么(前面两章写的已删除)
/* index.js */
import '../style/index.css';
import '../style/less.less';
import '../style/scss.scss';
import '../style/sass.sass';
const $ = require('jquery');
console.log($);
console.log($('#J-demo1').html());
$('#J-btn1').click(function () {
alert('hello');
});
/* index.html */
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>webpack学习笔记(三)</title>
</head>
<body>
<div id="J-demo1">引入jquery</div>
<button id="J-btn1">点我呀</button>
</body>
</html>
npm start
运行可看到相关jquery
的功能都已实现,$
也被打印出来,但是你在控制台打印$
jQuery
就会发现$
并不是上述打印的$
,jQuery