第2集丨webpack 江湖 —— 创建一个简单的webpack工程demo

目录

  • 一、创建webpack工程
    • [1.1 新建 webpack工程目录](#1.1 新建 webpack工程目录)
    • [1.2 项目初始化](#1.2 项目初始化)
    • [1.3 新建src目录和文件](#1.3 新建src目录和文件)
    • [1.4 安装jQuery](#1.4 安装jQuery)
    • [1.5 安装webpack](#1.5 安装webpack)
    • [1.6 配置webpack](#1.6 配置webpack)
      • [1.6.1 创建配置文件:webpack.config.js](#1.6.1 创建配置文件:webpack.config.js)
      • [1.6.2 配置dev脚本](#1.6.2 配置dev脚本)
      • [1.7 运行dev脚本](#1.7 运行dev脚本)
    • [1.8 查看效果](#1.8 查看效果)
    • [1.9 附件](#1.9 附件)
      • [1.9.1 package.json](#1.9.1 package.json)
      • [1.9.2 webpack.config.js](#1.9.2 webpack.config.js)
      • [1.9.3 index.js](#1.9.3 index.js)
      • [1.9.4 index.html](#1.9.4 index.html)
  • 二、webpack打包默认值
    • [2.1 默认值](#2.1 默认值)
    • [2.2 修改默认值](#2.2 修改默认值)

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图( dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

纸上得来终觉浅,绝知此事要躬行。此次目标是:创建一个简单的webpack工程demo,来理解webpack的运行机制。最终的工程目录结构如下所示:

一、创建webpack工程

1.1 新建 webpack工程目录

  • 新建一个 webpack 文件夹

  • 打开该文件夹的cmd: 选中文件夹目录,输入cmd

1.2 项目初始化

  • 在打开的cmd窗口中,执行命令 npm init -y,此时会在webpack 目录下生成文件package.json
javascript 复制代码
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm init -y
Wrote to D:\A_MyWork\M05.MYCode\vscode\javascript\webpack\package.json:

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}



D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.3 新建src目录和文件

  • webpack目录下,新建src源代码目录。
  • 并在src 目录下,新建 index.html、和 index.js

1.4 安装jQuery

  • 执行命令:npm install jquery -S
  • -S--save的简写
javascript 复制代码
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm install jquery -S

added 1 package in 2s

D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.5 安装webpack

  • 执行命令:npm install webpack webpack-cli -D
  • -D--save-dev的简写
  • 若想指定版本号,用@符指定:npm install webpack@5.88.2 webpack-cli@5.1.4 -D
javascript 复制代码
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm install webpack webpack-cli -D

added 117 packages in 6s

D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.6 配置webpack

1.6.1 创建配置文件:webpack.config.js

javascript 复制代码
module.exports = {
    mode:'development'	//指定构建模式,可选值有:production和development
}

1.6.2 配置dev脚本

  • 打开文件 package.json,新增如下代码
javascript 复制代码
 "scripts": {
    "dev": "webpack"
  },

1.7 运行dev脚本

  • 执行命令:npm run dev,对项目进行打包构建,此时构建成功之后会在生成dist目录和main.js
  • 在运行该命令npm run dev 的时候,会先读取 webpack.config.js 配置文件
javascript 复制代码
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm run dev

> webpack@1.0.0 dev
> webpack

asset main.js 319 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 279 KiB
  ./src/index.js 396 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
webpack 5.88.2 compiled successfully in 312 ms

D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.8 查看效果

  • 运行index.html,查看效果.

1.9 附件

1.9.1 package.json

javascript 复制代码
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.7.0"
  },
  "devDependencies": {
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

1.9.2 webpack.config.js

javascript 复制代码
module.exports = {
    mode:'development'
}

1.9.3 index.js

javascript 复制代码
import $ from 'jquery'

$(function () {
    $("li:odd").css('background-color','red')
    $("li:even").css('background-color','pink')
})

1.9.4 index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./index.js"></script> -->
    <script src="../dist/main.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>
</html>

二、webpack打包默认值

2.1 默认值

webpack中,有如下默认约定:

  • 默认的打包入口文件为 src/index.js
  • 默认的输出文件路径为 dist/main.js

2.2 修改默认值

我们,可以在 webpack.config.js 配置文件中,修改默认值:

javascript 复制代码
// 导入node.js中专门操作路径的模块
const path = require("path")    
module.exports = {
    mode:'development',
    // 打包入口的文件路径,__dirname表示当前文件的存放路径,即工程路径
    entry:path.join(__dirname,'./src/index.js'),
    output: {
        // 输出文件的存放路径
        path: path.join(__dirname,'./dist'),
        // 输出文件的名称
        filename: 'bundle.js'
    }
}

我们再次执行命令:npm run dev,此时生成的文件名就变成了bundle.js

javascript 复制代码
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm run dev

> webpack@1.0.0 dev
> webpack

asset bundle.js 319 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 279 KiB
  ./src/index.js 396 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
webpack 5.88.2 compiled successfully in 692 ms

D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>
相关推荐
有梦想的刺儿5 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具26 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web