webpack5基本教程-1

不点外卖

已于 2022-10-10 21:50:05 修改

阅读量347

点赞数 1

分类专栏： webpack5 文章标签： webpack javascript 前端

于 2022-10-10 21:45:47 首次发布

本文链接：https://blog.csdn.net/weixin_43484007/article/details/127250818

版权

基本使用

Webpack 是一个静态资源打包工具。
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。我们将 Webpack 输出的文件叫做 bundle。

功能介绍

Webpack 本身功能是有限的:

开发模式：仅能编译 JS 中的 ES Module 语法
生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

开始使用

案例

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

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.js";
import sum from "./js/sum.js";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module" src="/src/main.js"></script>
  </head>
  <body>
    <