webpack 打包流程(初学)

webpack 专栏收录该内容
2 篇文章 0 订阅

1)安装webpack-cli

npm install webpack-cli -g
webpack -v 安装成功,查看版本号

2)新建webpack.config.js文件

module.exports = {
    entry: "./runoob1.js", //入口文件
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
    }
};

3)打包

webpack

例子

1、新建test文件夹(新建index.html文件和index.js)
在这里插入图片描述
index.html

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

index.js

document.write("Hello.");

2、执行npm install webpack-cli -g命令,安装webpack
在这里插入图片描述

3、新建webpack.config.js文件

module.exports = {
    entry: "./index.js", //入口文件
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
    }
};

4、执行webpack命令进行打包
在这里插入图片描述
5、打包完成,打开index.html查看效果
在这里插入图片描述

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏

weixin_43949376

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值