Webpack的基本配置使用

为什么需要打包工具？

    开发时，我们会使用框架，es6模块化语法，Less/Sass等css预处理器等语法进行开发。
    这样的代码要想在浏览器运行必须经过编译成浏览器能识别的JS，Css等语法，才能运行
    打包工具还能压缩代码、做兼容性处理、提高代码性能等

目前常见的打包工具都有那些？

Grunt

Gulp

Parcel

Webpack

Rollup

Vite

 webpack概念

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

主要两种模式 

开发模式（development）：仅能编译js中的ES Module语法
生产模式（production）：能编译js中的ES Module语法，还能压缩js代码

webpack的配置5大核心概念

    entry(入口)
    output（输出）
    loader(加载器)
    plugin（插件）
    mode（模式）

 下载依赖

    npm init -y
    npm i webpack webpack-cli -D
    开发模式打包 npx webpack ./src/main.js --mode=development 
    生产模式打包 npx webpack ./src/main.js --mode=production 

webpack是一个打包工具，用来编译代码，只能处理js资源，一旦遇到css等其他资源就会报错