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和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的，本人亲自完成，有错误请大家指出2013-11-11
下面小编就为大家带来一篇浅谈es6语法 (Proxy和Reflect的对比)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
本篇文章主要介绍了微信小程序开发之圆形菜单 仿建行圆形菜单实例，具有一定的参考价值，有需要的可以了解一下。2016-12-12
不得不分享的JavaScript常用方法函数集，帮助大家更好的学习javascript程序设计，有兴趣的朋友可以参考一下2015-12-12
这篇文章介绍了js控制不同的时间段显示不同的css样式的实例代码，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了JavaScript数据结构之双向链表定义与使用方法,简单介绍了双向链表的原理,并结合实例形式分析了双向链表的定义与使用方法,需要的朋友可以参考下2017-10-10
下面小编就为大家带来一篇js弹出窗口返回值的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最近在做自己的小框架的按需加载模块，那么就需要做到异步动态加载css文件。仔细研究了一番，得到了如下解决方案，分享给大家。2015-01-01
单引号和双引号之间可以相互嵌套。接下来通过本文给大家介绍JavaScript的单双引号嵌套问题 ，感兴趣的朋友一起看看吧2017-08-08
本文主要介绍了canvas的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论