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异或算法实现脚本加解密的代码2008-02-02
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
WebSocket 是一种自然的全双工、双向、单套接字连接。这篇文章给大家介绍了HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天，感兴趣的朋友一起学习吧2016-10-10
这篇文章主要介绍了JavaScript更改原始对象valueOf的方法,涉及javascript使用自定义valueOf函数替换掉原始object中valueOf的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JS写滑稽笑脸运动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
JavaScript缺少块级作用域，没有private修饰符，但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量（除了this和argument2011-12-12
这篇文章主要为大家详细介绍了JavaScript的setter与getter方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
跨域（Cross-Origin）是指在浏览器中,当前网页的协议、域名或端口与请求目标的协议、域名或端口不相同,即存在跨域请求的情况,这篇文章主要介绍了uniapp中安装axios并解决跨域问题小结,需要的朋友可以参考下2024-05-05
在JavaScript中监听鼠标滚动事件的两种方法及优化技巧
在网页制作中,监听鼠标滚动通常有两种含义：一是监听页面或元素的滚动（scroll 事件）,二是监听鼠标滚轮的具体操作（wheel 事件）,下面分别介绍这两种方法以及常见的优化技巧,需要的朋友可以参考下2026-03-03
一直以来，对于JavaScript 中的this的理解都是很模糊的， 特别是对函数进行apply 与 call 调用。这两个操作如果没有很好的理解 JavaScript中this的概念，会越搞越迷糊。2009-07-07
JS如何设置滚动属性默认自动滚动到底部(overflow:scroll;)
这篇文章主要给大家介绍了关于JS如何设置滚动属性默认自动滚动到底部(overflow:scroll;)的相关资料,通过本文介绍的的JavaScript代码示例,你可以实现滚动条默认在最底部的效果,需要的朋友可以参考下2023-10-10
最新评论