webpack学习_webpack详细安装-CSDN博客

本文链接：https://blog.csdn.net/ljllxk001/article/details/125646147

基本使用

Webpack 是一个静态资源打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件，就可以在浏览器段运行了。

我们将 Webpack 输出的文件叫做 bundle。

Webpack 本身功能是有限的:

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

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

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

import count from "./js/count";
import sum from "./js/sum";

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

说明此时的main.js是不能被浏览器正常引入的！

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

npm init -y

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

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

  "main": "./src/main.js",

npm i webpack webpack-cli -D

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：指定模式（环境）。

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了
此时会输出一个main.js文件

新建一个html引入打包后的main.js文件，在浏览器中运行

<html>
<body>
    <p>hello webpack</p>
<script type="text/javascript" src="./dist/main.js" charset="utf-8"></script>
</body>
</html>

此时main.js可以正常引入，打开浏览器控制台可以看到count.js正常运行！

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

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