7. webpack 初步熟悉使用

2024-05-15 13:00:28

7. webpack 初步熟悉使用

1. 建立项目文件夹（文件夹或者名称你可以自定义，但是尽量标准化）

2.建立项目目录，必须目录和必须文件，然后使用项目指令

（1.） dist --存放打包文件

（2.） src --存放文件

（3） src 下下面建立 css /js/images 文件

（4）在src 目录下，建立必备文件目录，index.html main.js

3.整个部署于使用过程如下。

犯错总结：index.html 中忘记引包了src="../dist/boudle.js"，所以没有效果。。。。

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>组件的开发</title>

<script src="../dist/boudle.js"></script>

</head>

<!--

1.想要控制li,需要引入Jquery

2. 倒入Jquery包，使用 npm 指令，

3.初始化一下 npm init：这个命令用于创建一个package.json。特别要注意路径

npm init --yes或npm init -y:从当前目录中提取的信息生成默认的package.json。创建过程中不会提问。

4. npm i jquery -s 安装Jquery(倒入)jquery

5. 到main.js 中去编辑相关代码和指令,

6.写好以后，明知道不会兼容，因此需要webpack 打包一下，

7.webpack .\src\main.js --output .\dist\boudle.js

8.index.html 中忘记引包了src="../dist/boudle.js"，所以没有效果。。。。

-->

<body>

<ul>

<li>111111</li>

<li>22222</li>

<li>1333</li>

<li>1333</li>

<li>13333</li>

<li>13333</li>

<li>1333</li>

<li>14444</li>

<li>14994</li>

<li666></li>

</ul>

</body>

</html>

(4) 整体总结：

1.想要控制li,需要引入Jquery

2. 倒入Jquery包，使用 npm 指令，

3.初始化一下 npm init：这个命令用于创建一个package.json。特别要注意路径

npm init --yes或npm init -y:从当前目录中提取的信息生成默认的package.json。创建过程中不会提问。

4. npm i jquery -s 安装Jquery(倒入)jquery

5. 到main.js 中去编辑相关代码和指令,

6.写好以后，明知道不会兼容，因此需要webpack 打包一下，

7.webpack .\src\main.js --output .\dist\boudle.js

8.index.html 中忘记引包了，所以没有效果。。。。

7. webpack 初步熟悉使用相关推荐

2018年7月30日初步熟悉ubuntu操作系统
今天遇到的新单词: initialize v 初始化. torrent n 种子 alien n外星人 ware n商品 alienware n外星人笔记本,一个笔记本的品牌 fancy v想 ...
初步熟悉新webserver goahead
goahead是一个轻量级的web server,在深入代码之前,结构体设计上有3个重要的结构体数组(或链表)需要提前了解一.WebsRoute数组用于关联关联一类http请求,每一个http请求都 ...
Vue 学习第五天学习笔记
Vue 学习第五天 1. keyup事件 <div id="app"> <input type="text" v-model=" ...
入门 Webpack，看这篇就够了
2018年8月25日更新,目前 webpack 已经更新值 4.17.1 ,本文所用到的各种库或多或少有些过时,跟着代码操作下来可能会遇到各种问题,不过 webpack 的主体思想没变,所以还是希望本 ...
webpack安装使用教程
写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...
入门Webpack，看这篇就够了
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...
cnpm安装webpack_【6000字】从0到1，配置webpack
前言随着前端工程化,webpack已经是必不可少的打包工具,然鹅,我们在日常工作中,都是使用vue-cli等脚手架,0配置直接写业务代码,这个我个人是支持的,毕竟这样可以让同学萌更专注业务代码. 但 ...
纯CSS实现beautiful的3D动画
大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图("百题斩"获取<前端百题斩>pdf版:分别回复"g ...
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...

最新文章

热门文章