当前位置: 首页 > article >正文

webpack该如何打包

1.我们先创建一个空的大文件夹

2.打开该文件夹的终端 输入npm init -y

2.1.打开该文件夹的终端

2.2在该终端运行 npm init -y

3.安装webpack

3.1打开webpack网址 点击“中文文档”

3.2点击“指南”在点击“起步”

3.3复制基本安装图片画线的代码

4.在一开始的文件夹下在创建一个名为src的文件夹

5.然后再在src内创建一个名为index.js的文件

6.打开名为packge.json的文件修改名叫scripts内属性名后的所有内容,修改为webpack

7. 然后在终端内执行npm run scripts内的属性名(该属性名可以修改)

8.如果修改了src内 index.js的名字就不会打包成功

9.如果想打包成功那就需要在一开始的文件夹下创建一个名为webpack.config.js文件(简化打包命令)

10.在文件内书写以下内容

//导出一个配置对象
//path是nodejs内置模块 帮助处理路径、
const path = require('path')
module.exports = {
    //入口 ————dirname当前模块的绝对路径
    entry:path.resolve(__dirname,'src/index.js'),//此的地址为src内自己定义的文件名
    //出口
    output:{
        //目录
        path:path.resolve(__dirname, 'dist'),
        //文件名
        filename:'index.js',//此地址为src内自己定义的文件
        //清空dist 输出最新的内容
        clean:true,
    },
}

11.在一次执行 npm run scripts内的属性名(该属性名可修改)


http://www.kler.cn/news/163233.html

相关文章:

  • 左值、右值 、左值引用、右值引用的总结
  • 【数据结构】顺序表的定义和运算
  • 苹果手机video标签播放视频问题(播放mp4视频遇到的坑)
  • WPS论文写作——公式和公式序号格式化
  • 文本转图像 学习笔记
  • web前端开发html/css练习
  • 第75讲:MySQL数据库MVCC多版本并发控制核心概念以及底层原理
  • 无人机高空巡查+智能视频监控技术,打造森林防火智慧方案
  • 结构化布线系统
  • 树莓派 5 - Raspberry Pi 5 入门教程
  • C/C++——内存管理
  • 微软NativeApi-NtQuerySystemInformation
  • 【WPF.NET开发】WPF中的对话框
  • 拆分降采样与归一化(LN和BN)
  • websocket vue操作
  • 快速学会绘制Pyqt5中的所有图(下)
  • Kafka安全性探究:构建可信赖的分布式消息系统
  • 二叉树的非递归遍历(详解)
  • 一款可无限扩展的软件定时器开源框架项目代码
  • 三星AI笔电:年底大战一触即发,行业变革在即
  • 【数据结构和算法】种花问题
  • 快速搭建MyBatis源码调试环境
  • 麒麟V10服务器安装Apache+PHP
  • 基于OpenCV的人脸识别系统案例
  • 交换排序(冒泡排序)(快速排序(1))
  • ElasticSearch之Task management API
  • SQLite基本使用
  • mybatis和mybatisplus中对 同namespace 中id重复处理逻辑源码解析
  • 关于前端原生技术-Jsonp的理解与简述
  • 如何快速构建知识服务平台,打造个人或企业私域流量