webpack快速使用

简介: webpack快速使用

一、webpack是什么
webpack 是一个用于现代 JavaScript 应用程序的静态模块化打包构建工具

Webpack的运行需要依赖Node.js,因此需要先安装Node.js。
下载地址

查看是否安装成功
// 查看版本
node - v // 例如 :v16.13.1
二、webpack快速使用
2.1 初始化package.json
npm init -y
2.2 安装webpack相关依赖
npm i webpack webpack-cli -D
2.3 写一点点测试代码
src目录下 创建 main.js,tools.js

public目录下 index.html 引入dist/main.js

tools.js

// 随意写的两个方法
module.exports = {
   
    add:function(a,b) {
   
        return a+b
    },
    jian:function(a,b) {
   
        return a-b
    }
}

main.js

// 引入 tools文件
    const tools = require('./tools')
    console.log('tools',tools.add(4,6));
2.4package.json中添加打包脚本
{
   
      ....
      "scripts": {
   
           "build":"webpack"
       },
       ... 
 }

2.5 编写webpack配置文件
编写webpack配置文件,让webpack实现灵活环境定制,如下:

//引入相关依赖
const path=require('path')
//创建一个webpak配置对象
const config = {
   
    // 设置模式
    mode:'development',
    //配置入口
    entry:'./src/main.js',
    //配置出口
    output: {
   
       //打包路径
        path:path.resolve(__dirname,'dist'),  // dist 打包后的文件名
       //打包文件名 
        filename: 'js/bundle.js',
      //清理无用文件
        clean:tru
    }
}

//抛出
 module.exports = config

2.5 安装webpack服务器
安装webpack-dev-server: npm i webpack-dev-server -D
配置webpack.config.js
{
....
//配置webpack服务器
devServer: {
port: 9999, // '9999'自定义
//静态目录位置
static: {
directory:'dist'
}
}
....
}
3.配置package.json运行脚本

{
   
   ...
  "scripts": {
   
    "build": "webpack",
    "serve": "webpack serve"
  },
   ...
}

最后:使用命令打包

npm run build
相关文章
|
Android开发 Kotlin
Android经典面试题之Kotlin的==和===有什么区别?
本文介绍了 Kotlin 中 `==` 和 `===` 操作符的区别:`==` 用于比较值是否相等,而 `===` 用于检查对象身份。对于基本类型,两者行为相似;对于对象引用,`==` 比较值相等性,`===` 检查引用是否指向同一实例。此外,还列举了其他常用比较操作符及其应用场景。
291 94
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日,「2024 Altair 技术大会杭州站」成功召开,阿里云弹性计算产品运营与生态负责人何川,与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
阿里云携手Altair共拓云上工业仿真新机遇
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
人工智能 开发者
通义千问三款主力模型再降价,最高降幅85%
通义千问三款主力模型再降价,最高降幅85%
1429 12
通义千问三款主力模型再降价,最高降幅85%
|
缓存 测试技术 调度
PolarDB-X的TPC-H列存执行计划
本文从官方的角度逐条解析PolarDB-X在TPC-H列存执行计划的设计要点。这些要点不仅包含了各项优化的原理,还提供了相关的证明与代码实现,希望帮助读者更深入地理解PolarDB-X的列存优化器。
8250 26
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
642 61
|
自然语言处理 算法 云栖大会
通义万相发布视频生成模型,更懂中国风、中国话
通义万相发布视频生成模型,可一键创作影视级高清视频
1196 13
|
弹性计算 缓存 监控
基于“日志审计应用”的 DNS 日志洞察实践
DNS 解析日志是一种记录 DNS 请求和响应的基础信息,监控 DNS 服务可以帮助用户识别网络活动并保持系统安全。日志审计服务支持采集 DNS 内网解析日志、公网权威解析日志、GTM 日志。理解 DNS 日志的字段含义,洞察 DNS 日志背后所代表的网络信息,既可以帮助发现和诊断 DNS 解析相关的问题,还可以检测和识别潜在的安全威胁。
8731 116
|
架构师 前端开发 Java
Java开发工程师的职业规划应该是什么样的?
Java开发工程师的职业规划涵盖多个阶段,包括初入行业(0-1年)、技能提升(1-3年)、技术专家(3-5年)及管理或专家路线选择(5年以上)。各阶段设定了明确的技能要求与职业目标,从掌握Java基础、常用框架到深入研究高级技术、微服务架构乃至担任管理职务或成为技术专家。通过持续学习与实践,结合个人兴趣,Java工程师可在技术或管理领域找到合适的发展方向,最终实现职业成功。
1190 83