webpack打包工具的使用

• 在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。

• 但是我们现在希望能够使用新的特性，我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码。

• babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码的兼容性。

• 我们如果希望在webpack支持babel，则需要向webpack中引入babel的loader

• 使用步骤：

  1. 初始化项目yarn init -y
  2. 安装开发依赖webpack、webpack-cli,yarn add -D webpack webpack-cli(-D代表开发依赖)
  3. 在项目中创建src目录，然后编写代码（index.js）
  4. 执行yarn webpack来对代码进行打包（打包后观察dist目录）
• 不想用yarn webpack 可以配置密钥
• 使用库构建的示例条目为：package.json里面添加

• "scripts": {
      "build": "webpack"
    }

• 可以用yarn build打包了
• 在webpack.config.js里面进行配置

• 在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。

• 但是我们现在希望能够使用新的特性，我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码。

• babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码的兼容性。

• 我们如果希望在webpack支持babel，则需要向webpack中引入babel的loader

• 在 webpack 的配置中，loader 有两个属性：

• test 属性，识别出哪些文件会被转换。
• use 属性，定义出在进行转换时，应该使用哪个 loader。

• 使用步骤

  1. 安装 yarn add css-loader -D

  2. yarn add -D style-loader

  3. 配置：

     module: {
       rules: [
         {
           test: /\.m?js$/,
           exclude: /(node_modules|bower_components)/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env']
             }
           }
         }
       ]
     }

  4. 在package.json中设置兼容列表

     "browserslist": [
             "defaults"
      ]

     https://github.com/browserslist/browserslist

 webpack.config.js

const path = require("path")
module.exports = {
    //向外部暴露对象
    // mode: "production",//设置打包模式 production表示生产模式，development 开发模式
    //entry:"./src/index.js",//用来打包指定主文件或【"./src/index.js"，"./src/index.js"】，
    output: {
        //path:path.resolve(__dirname,"hello"),//指定打包的路径，必须是绝对路径
        // filename:"hello.js",//打包后的文件名
        // clean:true,//自动清理打包目录
    },
    module: {
        rules:
            [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader']//顺序不能错,从后往前执行
            },
            {
                test: /\.(jpg|png)$/,
                type: "asset/resource"//图片直接类型资源数据，可以通过type来处理
            }],


    }
}

index.js

import "./style/hello.css"//引入css
//import an from ""//引入图片
document.body.insertAdjacentHTML("beforebegin", "<h1>hhhh</h1>")
//document.body.insertAdjacentHTML("beforebegin", '<img src="${an}">')

Babel将新代码转换为旧代码 

安装：

npm install -D babel-loader @babel/core @babel/preset-env

配置：

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]

可以在package.json里面设置兼容列表

 "browserslist":[
    "defaults",
    "ie  6-8"
  ]

插件plugin（一定注意大小写）

 plugins: [
    new HTMLPlugin({
      title: "hello", //将网页名设置为
      Template: "./src/index.js", //以路径下的目录为模板
      //yarn webpack --watch自动打包
      //yarn add -D webpack-dev-server开发服务器  yarn webpack server   --open 启动开发服务器  并自动打开
    }),
  ],
  devtool: "inline-source-map", //打包后的代码和现在的映射

vite

除了Webpack外，还有一些其他的打包工具，在众多的打包工具中Vite是Webpack的有力竞争者。打包工具的左右都是相同的，不同点就在于打包的性能。Webpack的打包工作比较简单，在开发环境和生成环境中都会简单的直接将所有模块直接打包。直接打包速度比较慢，导致开发大型项目时每次重构都需要等待很长的时间。

Vite另辟蹊径，在开发环境中不再使用传统的模式对项目进行打包，而是采用ES模块化来引入模块，这样便大大的加快了开发时的重构速度。而在生成环境中，为了提高访问速度依然会正常的对项目进行进行打包工作。

 "scripts": {

    "build":"vite build", //vite 打包

    "preview":"vite preview"   //服务器打开预览打包后的代码

  }

安装

yarn add -D vite

- 除了速度外，vite使用起来也更加方便

- 基本使用：

  1. 安装开发依赖 vite

  2. vite的源码目录就是项目根目录

  3. 开发命令：

     vite 启动开发服务器

     vite build 打包代码

     vite preview 预览打包后代码

- 使用命令构建

  ```bash
  npm create vite@latest
  yarn create vite
  pnpm create vite
  ```

- 配置文件：`vite.config.js`

- 格式：

  ```javascript
  import { defineConfig } from "vite"
  import legacy from "@vitejs/plugin-legacy"
  
  export default defineConfig({
      plugins: [
          legacy({
              targets: ["defaults"]
          })
      ]
  })