# webpack

**Repository Path**: qiang-xiaoyue/webpack

## Basic Information

- **Project Name**: webpack
- **Description**: webpack的基本使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-22
- **Last Updated**: 2023-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack

#### 介绍
webpack的基本使用

#### 使用步骤
1.  初始化项目 yarn init -y
2.  安装依赖webpack  webpack-cli（不是必须的，但一般都是使用它在命令行中使用webpack打包）
```    
    yarn add -D webpack webpack-cli
    -D表示安装的开发依赖
```
3.  在项目中创建scr目录，然后编写代码
4.  执行yarn webpack命令来打包


#### 目录结构

![输入图片说明](imgimage6.png)

```
    1.  dist 打包后的文件夹
    2.  src  编写代码的文件夹
    3.  webpack.config.js    webpack配置文件

```


#### package.json一些配置

######  package.json

1.  scripts  命令别名

![输入图片说明](imgimage3.png)

2.  devDependencies  开发依赖

  ![输入图片说明](imgimage4.png)

3.  webpack.config.js一些配置
```
    1. mode:"xxx",    //设置打包的模式，production 生产模式 || development 开发模式
    2. entry:"xxx",   //入口，指定打包时的主文件，默认 ./src/index.js
    3. output: {xxx}  //出口，打包后的文件名
    4. 配置loaders: webpack默认情况下，只会处理js文件，如果需要处理其他类型文件，就需要引入对应的loader
                以css为例：1. 安装 yarn add css-loader -D
                          2. 配置：
```
![输入图片说明](imgimage2.png)

4. babel ：可以将新js语法转为旧js语法。 
    js代码中，需要用到新特性。有时这些新特性兼容性不好，导致我们无法使用新特性。（IE）。
    但我们必须使用，
```
    安装：
    1. npm install -D babel-loader @babel/core @babel/preset-env
```
![输入图片说明](imgimage1.png)
   

5. 插件（pugin）
    * webpack扩展功能
    * 使用：
        * 安装
        * 配置里面引入 并 plugins中 use 使用。

6. devtool： "inline-source-map" 代码映射，可以在浏览器中调试写的代码，不会让你看到打包后乱糟糟的代码
![输入图片说明](imgimage.png)

#### 命令
1. yarn webpack --watch  自动实时构建
2. yarn webpack serve 部署一个服务器访问资源，实时自动构建
    * 安装 yarn add -D webpack-dev-sever
```
    注意：资源打包到了服务器里面，本地dist目录需要手动打包。
```


# Vite
```
   * 开发时，不对代码打包，而是直接采用ESM的方式来运行
   * 项目部署时，在对项目进行打包
```


1.  安装：
     1. yarn init -y  <br>
     yarn add vite -D
     2. 或者直接命令安装与配置 yarn create vite
    * 打包：vite build
    * 运行：vite   //直接预览，没打包
    * 打包后预览：vite preview  //打包后预览
2.  vite配置文件
```
    vite.config.js
```
  1. 插件:  
        @vitejs/plugin-legacy   兼容性，和babel差不多。
        如图：
        ![输入图片说明](image1.png)

3.  xxxx