webpack安装与基本使用

  1. 首先安装nodejs,nodejs自带npm包,这我就不说了,直接去官网下载就好了
  2. 打开cmd,输入npm install webpack -g(我这里是全局安装)
  3. 安装webpack-cli(如果还需安装其他也可,如vue-cli)
    npm install -g webpack-cli//全局安装webpack-cli
    (我就只安装了这两个,我看网上还安装了好多东西,我觉得我暂时用不到就没装了。)
  4. 创建项目。

新建一个目录app,在终端打开,输入npm init,一直回车最后输入y即可,便能看到产生了一个package.json文件

我们在app目录下添加一个work.js文件并输入:

document.write("hello world");

再添加一个index.html文件并输入:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
</html>

接下来我们使用webpack命令来打包:webpack work.js -o bundle.js

注意:由于版本问题,我这里直接用webpack work.js bundle.js命令会报错。

最后,我们可以看到目录下生成了一个bundle.js文件,然后我们打开index.html就可以看到能输出hello world啦。

我说的都是很基础的东西,因为我也还在学,希望能帮到你啦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值