webpack打包工具的使用方法

小銘敲代码

已于 2022-09-09 19:24:57 修改

阅读量1.2k

点赞数

文章标签： webpack javascript 前端

于 2022-08-24 16:19:49 首次发布

本文链接：https://blog.csdn.net/qq_52772997/article/details/126507151

版权

1.npm init -y初始化文件生成package.json文件

2.npm install jquery -S安装jquery包，

3.卸载包的时候，用npm uninstall jquery -S(如果需要卸载的话)

4.在根目录上新建src文件夹，里面新建index.html文件和index.js文件

一、webpack打包工具

1、简介

webpack是一个流行的前端项目构建工具（打包工具），
web开发会遇到几个常见的问题，可以用webpack来解决：
1>文件之间相互依赖关系复杂
2>浏览器对于ES6的模块化支持不是很友好
3>浏览器对于js的新语法特性兼容也不是很好

2.npm补充

npm install xx --save-dev 可以简写成 npm install xx -D  代表安装的这个包是开发的时候用的
npm install xx --save 可以简写成   npm  install xx -S   代表安装的这个包是开发和上线以后都要使用的
npm install jquery -S: jquery开发的用，上线的也要用
npm install less -D: less是开发的时候用，项目上线以后使用的转换后的css代码

3.webpack一系列的步骤

1.npm init -y初始化文件生成package.json文件

2.npm install jquery -S安装jquery包，

3.卸载包的时候，用npm uninstall jquery -S(如果需要卸载的话)

4.在根目录上新建src文件夹，里面新建index.html文件和index.js文件

index.html文件里面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <div id="box">我是测试文字</div>
</bod