Webpack介绍和基本使用指南

2024-03-01 0 496
目录
  • 基本使用
    • 1. 资源目录
    • 2. 创建文件
    • 3. 下载依赖
    • 4. 启用 Webpack 开发模式
    • 5. 观察输出文件
  • 概述

    基本使用

    1. 资源目录

    webpack_code # 项目根目录(所有指令必须在这个目录运行)
    └── src # 项目源码目录
    ├── js # js文件目录
    │ ├── count.js
    │ └── sum.js
    └── main.js # 项目主文件

    2. 创建文件

    count.js

    export default function count(x, y) {
    return x – y;
    }

    sum.js

    export default function sum(…args) {
    return args.reduce((p, c) => p + c, 0);
    }

    main.js

    import count from \”./js/count\”;
    import sum from \”./js/sum\”;
    console.log(count(2, 1));
    console.log(sum(1, 2, 3, 4));

    3. 下载依赖

    打开终端,来到项目根目录。运行以下指令:

    初始化package.json

    npm init -y

    此时会生成一个基础的package.json文件。

    需要注意的是package.json中name字段不能叫做webpack, 否则下一步会报错

    下载依赖

    npm i webpack webpack-cli -D

    4. 启用 Webpack 开发模式

    npx webpack ./src/main.js –mode=development

    生产模式

    npx webpack ./src/main.js –mode=production

    npx webpack: 是用来运行本地安装Webpack包的。

    ./src/main.js: 指定Webpack从main.js文件开始打包,不但会打包main.js,还会将其依赖也一起打包进来。

    –mode=xxx:指定模式(环境)。

    5. 观察输出文件

    默认Webpack会将文件打包输出到dist目录下,我们查看dist目录下文件情况就好了

    Webpack本身功能比较少,只能处理js资源,一旦遇到css等其他资源就会报错。

    所以我们学习Webpack,就是主要学习如何处理其他资源。

    概述

    Webpack:

    1.两种开发模式

    • 开发模式:代码能编译自动化运行
    • 生产模式:代码编译优化输出

    2.Webpack 基本功能

    • 开发模式:可以编译 ES Module 语法
    • 生产模式:可以编译 ES Module 语法,压缩 js 代码

    3.Webpack 配置文件5 个核心概念

    • entry
    • output
    • loader
    • plugins
    • mode

    devServer 配置

    4.Webpack 脚本指令用法

    • webpack 直接打包输出
    • webpack serve 启动开发服务器,内存编译打包没有输出

    到此这篇关于Webpack基本使用和概述的文章就介绍到这了,更多相关Webpack基本使用内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

    您可能感兴趣的文章:

    • webpack-bundle-analyzer 插件配置使用方法
    • Vue webpack的基本使用示例教程
    • JavaScriptwebpack5配置及使用基本介绍
    • 使用webpack5从0到1搭建一个react项目的实现步骤
    • webpack中的模式(mode)使用详解
    • 如何使用webpack打包一个库library的方法步骤
    • 浅析webpack-bundle-analyzer在vue-cli3中的使用

    收藏 (0) 打赏

    感谢您的支持,我会继续努力的!

    打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
    点赞 (0)

    悠久资源 JavaScript Webpack介绍和基本使用指南 https://www.u-9.cn/biancheng/javascript/182374.html

    常见问题

    相关文章

    发表评论
    暂无评论
    官方客服团队

    为您解决烦忧 - 24小时在线 专业服务