webpack--指南1--打包文件配置

全局安装webpack

npm install webpack -g

1:创建一个webpack-demo文件夹,并且进入这个文件夹

mkdir webpack-demo && cd webpack-demo

2:生成package.json文件

npm init -y

此时项目结构如图:这里写图片描述
3:添加webpack

npm install --save-dev webpack

此时项目结构如图:node_modules文件夹中居然有484个文件夹
这里写图片描述
4:新建文件,结构如图

这里写图片描述
这里写图片描述

npm install --save lodash

这里写图片描述
5:利用webpack生成bundle.js文件
(1)方法一:

webpack src/index.js dist/bundle.js

(2)方法二:
新建一个webpack.config.js文件
这里写图片描述

webpack --config webpack.config.js

此时在dist文件夹中就生成了bundle.js文件;打开index.html可以看到内容

(3)方法三(在webpack.config.js文件基础上):
考虑到CLI这种方式来运行本地的webpack不是很方便,我们可以设置一个快捷方式

//package.json
{
...
    "scripts": {
        "build": "build"
    },
...
}

运行npm run build来代替我们之前的长命令,
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值