Webpack学习：基本使用-打包简单的js文件

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

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

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

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

Webpack 本身功能是有限的:

开发模式：仅能编译 JS 中的 ES6模块化 语法

生产模式：能编译 JS 中的 ES6模块化 语法，还能压缩 JS 代码

---

首先准备src文件夹里面存放的是项目源码目录

main.js:项目主文件 打包的入口文件 导入

js文件目录：使用模块化语法，暴露出去

使用index.html 引入main.js 此时会报错，es6模块化浏览器不识别 会报错

public：放置静态文件

打开index报错：Uncaught SyntaxError: Cannot use import statement outside a module

浏览器不支持es6模块化，使用webpack ,将文件进行编译 编译成浏览器可以识别的语法

---

安装包，安装前需要初始化包描述文件：

npm init -y

包名不可以是webpack 否则会出错 主文件改成main.js

下载依赖

npm i webpack webpack-cli -D

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

mode=production 生产模式——代码更简洁

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

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

代码更复杂

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

代码更简洁

这里注意一定要是 ./ 而是不是.\

打包生成了dist 目录 下面的main.js

使用打包后的main.js

成功运行