【原创】Webpack 基础（一）

Webpack 是基于 node 的打包工具，需要 node16+ 版本。

为什么要使用打包工具

开发时，使用的 Vue、ES6 模块化语法、Less/Sass 等预处理器的语法进行开发，这样的代码要想在浏览器运行，必须经过编译，编译成浏览器可以识别的 Js Css 语法才能运行，打包工具就是这个用途。
将浏览器不能识别的语法，编译成浏览器可以识别的语法，最终可以在浏览器中运行。

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

Webpack 初体验

• 新建文件夹，并运行 npm init 初始化该项目。
  该命令其实就是生成一个 package.json 文件。

• 安装 webpack
  全局安装：npm install webpack webpack-cli -g
  项目内安装：npm install webpack webpack-cli --save-dev 或 npm install webpack webpack-cli -D。此处 --save-dev 等同于 -D，即安装 devDependencies 开发依赖。--save 等同于 -S，模块名将被添加到 dependencies。

• 运行 npx webpack index.js，让 webpack 帮我们去翻译。
  此时文件夹就多了一个 dist 文件夹，在 html 中引入打包好的文件即可。

核心概念

• entry 入口
• output 输出
• loader 加载器 webpack 本身只能处理 js 和 json，其他的需要加载器才能解析
• plugins 插件
• mode 模式 开发模式和生产模式

配置文件 webpack.config.js

Node.js中运行，使用 CommonJS 模块。

使用 css-loader 方法步骤

处理图片资源

处理字体图标资源

修改输出文件目录

将打包生成的 js 文件到 js 目录，图片文件到 images 目录

output:{
path:path.resolve(__dirname, "dist"),
filename:"static/js/main.js",
},
generator:{
filename:"static/images/[hash][ext][query]"
}

自动清空上次打包的内容

output:{
clean:true
}

处理 JS 资源

• 针对 js 做兼容性处理，使用 babel 完成。
• 针对代码格式，使用 eslint 完成。