第一次使用webpack
2019-05-01 本文已影响0人
coderymy
1，创建一个文件夹，用VSCode打开
2，在项目中创建对应的文件夹路径，dist，src
3，创建main.js，index.html
4，在main.js中引入jquery，注意的是，下载的是什么样的，就引入什么样
5，在终端上使用npm init -y
6，使用webpack
默认直接到dist路径
所以webpack .\src\main.js
会在dist路径下生成一个main.js
然后在html中引入对应的经过webpack渲染过的文件，也就是dist中的那个对应的文件
webpack可以做的事情
- 可以处理js文件的互相依赖关系，也就是说，可以在一个js中引入另外的js文件，这样可以使在前端页面直接引入一个js就完了
- 经过webpack处理之后，可以将一些浏览器不识别的高级语法或者是兼容性导致的文件无法读取问题解决掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../dist/main.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
</body>
</html>
// 这个main.js是我们项目的入口
import $ from '_jquery@3.4.0@jquery'
$(function(){
$('li:odd').css('backgroundColor','lightblue')
$('li:even').css('backgroundColor',function(){
return '#'+'D97634'
})
})
image.png
