webpack的敲门砖-CSDN博客

本文链接：https://blog.csdn.net/weixin_61742983/article/details/128176225

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

webpack
一、webpack是什么？
二、基础使用
- 1.创建npm项目
- 2.起步
总结

前言

首先，学习任何一个东西，最基本的要去官方网站看,webpack的官网是webpack | webpack 中文文档 | webpack 中文网

一、webpack是什么？

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。将各种类型的资源包打包成最基础的html,css,javascript文件

二、基础使用

1.创建npm项目

在一个文件里打开cmd输入以下指令

代码如下（示例）：

npm init -y

安装webpack脚手架

npm install webpack webpack-cli --save-dev

2.起步

在package.json下方scripts中加入build代码用于执行webpack指令，使用时输入npm run build会将手搓的代码进行压缩放到dist下方

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development"
  },

创建src文件夹,在其下创建一个index.js文件,用于项目的入口

console.log("项目入口");

在src同级目录下创建一个index.html,引入的是dist下方压缩过后的文件

<!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>webpack敲门砖</title>
</head>

<body>
    <script src="./dist/main.js"></script>
</body>

</html>

然后在src下建立一个用于创建按钮的工具createButton.js在utils下方

export function createButton(text, clickCallBack) {
    let button = document.createElement("button");
    button.innerText = text;
    button.onclick = clickCallBack;
    document.body.appendChild(button);
}

注意:需要使用export导出函数 createButton这个函数，其中需要传入参数一是按钮的内容、参数二是这个按钮所要执行的命令

然后将其导出到src中index.js下方

import { createButton } from "./utils/createbutton";
createButton("首页按钮", () => {
    console.log("首页按钮点击了");
})

需要使用具名导入把createButton导入到本文件,然后在cmd中输入

npm run build

自动生成dist，dist下方是编写的js文件的压缩版本，至此webpack基本的压缩完成

总结

本篇文章只是对于webpack的基础入门使用，如果真的学习推荐联系webpack官网进行食用