webpack该如何打包(打包流程)
更新时间：2023年12月09日 09:43:37 作者：W晚睡W
这篇文章主要介绍了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内的属性名(该属性名可修改)
到此这篇关于webpack该如何打包的文章就介绍到这了,更多相关webpack打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
单击复制文字的js找了很久，由于之前没有接触过，完全不知道兼容ie及标准dom浏览器，不仅仅要通过js，而且需要flash的帮忙，下面与大家分享下具体的实现方法2013-07-07
这篇文章主要为大家介绍了如何利用JS实现一个小型编译器，文中的示例代码讲解详细，对我们学习或工作有一定的参考价值，需要的可以参考一下2022-04-04
如何使用 Intl.RelativeTimeFormat 在 JavaScript&nbs
Intl.RelativeTimeFormat是JavaScript提供的一个国际化API,用于格式化相对时间,如"3天前"或"2年后",支持多种语言和配置选项,适用于社交媒体时间戳和事件提醒等场景,它简化了国际化的相对时间显示,使开发者能够根据用户的语言和区域设置轻松实现时间格式化2024-09-09
这篇文章主要介绍了JavaScript ECharts可视化图表库，ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表2023-01-01
TreeView 用法，后台结合asp.net需要的朋友可以参考下。2011-07-07
本文是小编在平时项目中收集整理的javascript常用函数方法，特别是javascript方法经常会用到，对javascript函数方法相关知识感兴趣的朋友一起学习吧2015-12-12
本文主要分享了利用canvas画多边形的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JavaScript遍历数组的方法代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
本文给大家收藏整理了js数组去重的n种方法，大家可以根据自己需要选择比较好的方法，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要介绍了JS查找数组中重复元素的方法,结合具体实例形式对比分析了javascript针对数组的遍历、判断、排序等相关操作技巧,需要的朋友可以参考下2017-06-06
最新评论