Vue3基础之Webpack

Webpack是一个模块化打包工具，可以将互相依赖的HTML、CSS、Js或是图片字体等经过一些列处理，打包成静态的前端项目

可以将项目中的所有模块打包成一个或多个包，只在需要时进行加载，支持热模块替换，可以压缩打包后的代码，在开发过程中，当发生代码变化时，可以实时更新浏览器中的模块，拥有广泛的插件生态系统

首先，在需要使用webpack的文件夹下

npm init -y 初始化

npm add webpack-cli --dev 安装到开发者环境中

使用npx webpack打包

webpack配置

在根目录下创建一个webpack.config.js文件

进行配置

const path = require("path");

module.exports = {

    mode: "development",

    entry: "./src/index.js",

    output: {

        filename: "dist.js",

        path: path.resolve(__dirname,"dist"),

    }

}

mode为开发者模式

entry选择与config文件的src目录中下index.js作为入口文件

output为配置输出名字

打包css文件与图片

需要安装

npm add --dev style-loader css-loader

自动生成html文件

npm add html-webpack-plugin --dev

兼容低版本浏览器

npm add --dev babel-loader @babel/core @babel/preset-env

压缩打包之后的js代码

npm add --dev terser-webpack-plugin

无需命令自动打包

npm add --dev webpack-dev-server

还需要再package.json中添加

  "scripts": {

    "start": "webpack serve --open"

  },

 避免浏览器缓存js文件，我们可以给生成的文件修改文件名

配置可视化打包工具

npm add --dev webpack-bundle-analyzer

出现的文件分析图为

整体的配置文件webpack.config.js为

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const TerserPlugin = require("terser-webpack-plugin"); // 修正了这里，原名为 TerserPlugon，应为 TerserPlugin

const { Static } = require("vue"); // 这一行在这里没有被使用，可以移除

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer"); // 修正了这里，原名为 BundelAnalyzerPlugin

module.exports = {

  // 指定构建模式为 development（开发模式），这会影响资源的优化和压缩等

  mode: "development",

  // 指定应用的入口文件

  entry: './src/index.js',

  // 配置 source map，这里使用的是 inline-source-map，源代码和 source map 会在同一个文件中

  devtool: "inline-source-map",

  // 输出配置

  output: {

    // 输出文件的名称，[name] 是占位符，代表 entry 中的名称，[contenthash] 是文件内容的哈希值

    filename: '[name].[contenthash].js',

    // 输出文件的目录

    path: path.resolve(__dirname, "dist")

  },

  // 优化配置

  optimization: {

    // 是否启用压缩

    minimize: true,

    // 压缩器配置，这里使用了 TerserPlugin 来压缩 JavaScript 文件

    minimizer: [new TerserPlugin()]

  },

  // 开发服务器配置

  devServer: {

    // 静态资源服务路径

    static: './dist'

  },

  // 解析配置

  resolve: {

    // 设置别名，这里为 'utils' 设置了一个别名，指向 src/utils 目录

    alias: {

      utils: path.resolve(__dirname, "src/utils")

    }

  },

  // 模块配置

  module: {

    // 模块规则，用于处理不同文件类型的加载器

    rules: [

      // 处理 CSS 文件的规则

      {

        test: /\.css$/i,

        use: ["style-loader", "css-loader"]

      },

      // 处理图片文件的规则

      {

        test: /\.(png|svg|jpg|jpeg|gif)$/i,

        type: "asset/resource"

      },

      // 处理 JavaScript 文件的规则

      {

        test: /\.js$/,

        exclude: /node_modules/, // 排除 node_modules 目录

        use: {

          loader: "babel-loader",

          options: {

            presets: ["@babel/preset-env"] // Babel 预设，用于转译 ES6+ 代码为 ES5

          }

        }

      }

    ]

  },

  // 插件配置

  plugins: [

    // HtmlWebpackPlugin 插件，用于自动生成 HTML 文件

    new HtmlWebpackPlugin({

      title: "博客列表"

    }),

    // BundleAnalyzerPlugin 插件，用于分析打包后的文件大小和依赖关系

    new BundleAnalyzerPlugin.BundleAnalyzerPlugin()

  ]

};

之后，项目就能正确运行或是部署在服务器中

Loader

sytle-loader将css文件处理之后插入到HEAD中

css-loader将css处理为webpack能处理的类型

sass-loader、less-loader将sass与less转化为css

file-loader打包图片与文字

Plugin

HtmlWebpackPlugin 自动创建html5文件，将打包之后的js注入进去

TerserPlugin，压缩js代码

BundleAnalyzerPlugin 提供可视化的文件大小与依赖的界面