VUE

前言：实际开发中会使命令行工具（俗称 CLI）一键生成带有 webpack 的项目开箱即用，所有 webpack 配置项都是现成的！但是我觉得简单了解了解也没有什么坏处

webpack

前端工程化的具体解决方案

主要功能

提供友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端 JavaScript 的兼容性，性能优化等强大的功能。简单来说就是更快，更强。

好处

让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

基本使用

新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json （空白目录必须英文命名不能大写以及数字）
新建 src 源代码目录
新建 src -> index.html 首页和 src -> index.js 脚本文件
初始化首页基本的结构
在项目中安装 webpack

npm install webpack@5.42.1 webpack-cli@4.7.2-D
在项目中配置 webpack
1. 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
```
module.exports = {
  mode: "development",
};
```
  mode 的可选值:
  1. development:
    - 开发环境
    - 不会对打包生成的文件进行代码压缩和性能优化
    - 打包速度快，适合在开发阶段使用
  2. production:
    - 生产环境
    - 会对打包生成的文件进行代码压缩和性能优化
    - 打包速度很慢，仅适合在项目发布阶段使用
2. 在 package.json 的 scripts 节点下，新增 dev 脚本如下：
```
 "scripts": {
    "dev":"webpack"
  },
```

webpack.config.js 文件的作用

webpack.config.js 是webpack 的配置文件。webpack 在真正开>始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

webpack 中的默认约定

在webpack 4.x 和5.x 的版本中，有如下的默认约定：

默认的打包入口文件为src-> index.js;
默认的输出文件路径为dist -> main.js。注意：可以在webpack.config.js 中修改打包的默认约定

自定义打包的入口与出口:

在webpack.config.js 配置文件中，通过entry 节点指定打包的入口。通过output 节点指定打包的出口。

 const path = require('path');//导入node.js 中专门操作文件路径的模块
module.exports={
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        path: path.join(__dirname,'./dist1'),
        filename:'myindex.js'//自定义输出文件名
    }
}

学习vue第一天--webpack的基础配置

VUE

webpack

主要功能

好处

基本使用

webpack.config.js 文件的作用

webpack 中的默认约定