webpack知识，在html里通过webpack使用commonJS规范，可以require各种包

最新推荐文章于 2024-02-04 10:28:11 发布

原创最新推荐文章于 2024-02-04 10:28:11 发布 · 7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

1 WEB前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何通过Webpack构建工具和jQuery库实现简单的按钮点击事件，包括项目初始化、配置Webpack、编写JavaScript代码等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.任务：

点击按钮alert("你好");

代码用jQuery来做，这里的jQuery不是传统的 <script src="jquery.js"></script>，而是在require("jquery");

2.准备工作

2.0 新建一个demo文件夹，然后在该文件夹里操作;
2.1 npm init (一直enter) ;
2.2 npm install webpack --save 
2.3 npm install jquery --save

3.新建文件

文件目录如下：

详细说明各个文件，

index.html文件的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body>

    <button>按钮</button>
  //bundle.js是webpack编译之后的自动生成的文件
  <script src="bundle.js"></script>
  </body>
</html>

index.js的内容：

var $ = require('jquery') ;

  $('button').click(function(){
    alert('你好！') ;
  })

package.json的内容：

先npm init 之后不停的enter 。之后npm install jquery npm install webpack的时候会自动加入到包依赖中

{
  "name": "02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.0.0",
    "webpack": "^1.13.1"
  }
}

webpack.config.js的内容：

module.exports = {
  //入口文件
  entry:'./index.js',
  output:{
    //编译之后的文件放到当前目录并且命名为bundle.js
    path:__dirname,
    filename:'bundle.js'
  }
}

在当前目录下打开命令台输入webpack . 出现如下内容

文件夹里自动出现bundle.js

在浏览器里打开index.html文件，点击“按钮”