webpack基础配置

iiiiiiiice2023-08-01 18:20

webpack基础

    • [webpack 处理css兼容问题](#webpack 处理css兼容问题)
    • [webpack 处理css闪屏问题](#webpack 处理css闪屏问题)
    • [webpack 优化压缩css代码](#webpack 优化压缩css代码)
      • 总结
        • [webpack 两种开发模式](#webpack 两种开发模式)
        • [webpack 基本的功能](#webpack 基本的功能)
        • [webpack配置 5概念+devServer](#webpack配置 5概念+devServer)
    • 生产环境webpack配置实例
    • 开发环境webpack配置实例
    • webpack优化

webpack 处理css兼容问题

下载loader 引入 package.json修改

  1. postcss-loader 可以处理css兼容问题 需要在css-loader 之后------其他cssloader 之前 引入
  2. package.json 添加数组 browserlist:["ie>=8",">1%","not dead"] 百分之99 还存在的浏览器 大于等于ie8

webpack 处理css闪屏问题

MiniCssExtractPlugin 使用插件的loader

将css文件以单文件link方式引入 避免出现闪屏现象

  1. 不使用style-loader
  2. 使用MiniCssExtractPlugin.loader

webpack 优化压缩css代码

CssMinimizerWebpackPlugin

  1. 下载安装 引入webpack 配置文件 直接在plugin中new CssMinimizerWebpackPlugin()
  2. 提示：默认生产环境下 js html 会自动压缩不需要额外的配置

总结

webpack 两种开发模式

  1. 开发模式：代码能编译自动化运行 devServer 不用输出
  2. 生产模式：代码编译优化输出

webpack 基本的功能

  1. 开发模式：可以编译 es module 语法
  2. 生产模式：可以编译 es module 语法 压缩js代码

webpack配置 5概念+devServer

entry、output、loader、plugins、mode 、devServer

生产环境webpack配置实例

javascript 复制代码 
const path = require("path"); //node.js核心模块，专门用来处理路径问题
const os = require("os"); // Node.js的os模块是一个内置模块，用于提供与操作系统相关的功能。
const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 将css文件以单文件link方式引入 避免出现闪屏现象

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); //css压缩
const TerserWebpackPlugin = require("terser-webpack-plugin"); //js压缩
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"); //图片压缩
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin"); //预加载当前页的资源

const threads = os.cpus().length;

function getStyleLoader(pre) {
  return [
    // 将 JS 字符串生成为 style 节点
    //"style-loader",
    //不使用style-loader  下面的这个会生成单个css文件 link引入 避免出现闪屏现象
    MiniCssExtractPlugin.loader,
    // 将 CSS 转化成 CommonJS 模块
    "css-loader",
    // postcss-loader 能解决大部分css兼容问题
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            [
              "postcss-preset-env",
              {
                // 其他选项
              },
            ],
          ],
        },
      },
    },
    pre,
  ].filter(Boolean);
  //filter 过滤掉undefined null 等返回false的数组元素
}

//启动命令  npx webpack --config ./config/webpack.prod.js
// 生产模式 不需要devServer
module.exports = {
  // 入口
  entry: "./src/main.js", //相对路径

  // 输出
  output: {
    // 文件的输出路径
    // __dirname node.js的变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "../dist"), // 绝对路径
    // 入口文件打包的文件名
    // filename: "js/main.js",  下面的命名方式，兼容多入口
    filename: "js/[name].js",

    // 图片、字体等通过type：asset处理资源命名 可以统一定义在此处，下面就不用写了
    //assetModuleFilename:"media/[hash][ext][query]"

    // code split给打包输出的其他名字命名
    chunkFilename: "js/[name].chunk.js",
    clean: true, //自动清理上次打包的内容
  },

  //加载器
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
          // style-loader 将js中的css通过创建style标签添加html文件中生效
          // css-loader  将css资源编译成common.js的模块到js中
          { test: /\.css$/, use: getStyleLoader() }, // use执行顺序 从右到左、从下到上
          { test: /\.ts$/, use: "ts-loader" },
          {
            test: /\.s[ac]ss$/i,
            use: getStyleLoader("sass-loader"),
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                // 不需要下载 loader webpack5内置处理
                // 小于10kb 的图片转base64
                // 优点 减少请求的数量  缺点 体积会大一点点
                maxSize: 10 * 1024, // 10kb
              },
            },
            generator: {
              //打包后指定图片路径
              // [hash:10] hash值取前十位
              filename: "imgs/[hash][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2?|mp3|mp4)$/,
            type: "asset/resource", //转base64 用asset
            generator: {
              //打包后指定文字路径
              filename: "media/[hash][ext][query]",
            },
          },
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  works: threads, // 进程数
                },
              },
              {
                loader: "babel-loader",
                // 下面对于babel的预设处理 可以写到babel.config.js 文件中 也可以在此处
                options: {
                  //  presets: ["@babel/preset-env"],
                  cacheDirectory: true, // 开启babel缓存
                  cacheCompression: false, //  关闭缓存文件压缩
                  plugins: ["@babel/plugin-transform-runtime"], //减少代码体积
                },
              },
            ],
          },
        ],
      },
    ],
  },

  //插件
  // plugin的配置
  plugins: [
    new ESLintPlugin({
      context: path.resolve(__dirname, "../src"), //检查文件
      exclude: "node_modules", //默认值
      cache: true, // 开启缓存
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/eslintcache"
      ),
      threads, //开启多进程
    }),
    new HtmlWebpackPlugin({
      //模版，以public/index.html文件为模版创建新的html文件
      //新的html文件特点：1结构和原来一致，2.自动引入打包输出的资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new PreloadWebpackPlugin({
      rel: "preload", //option:prefetch
      as: "scrpit", //option:stylesheet/icon/next
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:10].css",
      chunkFilename: "css/[name].chunk.[contenthash:10].css",
    }),
    new ImageMinimizerPlugin({
      test: /\.(jpe?g|png|gif|svg)$/i, // 匹配要压缩的图像文件类型的正则表达式
      exclude: /node_modules/, // 排除哪些文件夹下的图像不参与压缩
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminGenerate,
        options: {
          plugins: [
            ["gifsicle", { interlaced: true }], // 使用gifsicle插件压缩gif图像
            ["jpegtran", { progressive: true }], // 使用jpegtran插件压缩jpg图像
            ["optipng", { optimizationLevel: 5 }], // 使用optipng插件压缩png图像
            [
              "svgo",
              {
                plugins: [
                  "preset-default", // 使用svgo的默认插件集合压缩svg图像
                  "prefixIds", // 为svg元素添加唯一前缀，防止id冲突
                  {
                    name: "sortAttrs",
                    params: {
                      xminsOrder: "alphabetical", // 按字母顺序排序svg属性
                    },
                  },
                ],
              },
            ],
          ],
        },
      },
    }),
    // 下面两个插件可以放在这个位置
    // new CssMinimizerPlugin(),
    // new TerserWebpackPlugin({
    //     parallel:threads  //开启多进程并设置进程数
    // })
  ],
  // 也可以放在这个位置 webp5 推荐压缩插件放在下面
  optimization: {
    minimizer: [
      //压缩css
      new CssMinimizerPlugin(),
      // 压缩js
      new TerserWebpackPlugin({
        parallel: threads, //开启多进程并设置进程数
      }),
    ],
    splitChunks: {
      chunks: "all",
      //其他都用默认值
    },
    //当缓存文件发生变化，一般所有都更新，加上这个只更新修改的文件，其他缓存文件不变
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}.js`,
    },
  },

  //模式
  mode: "production",
  devtool: "source-map",
};

开发环境webpack配置实例

javascript 复制代码 
const path = require("path"); //node.js核心模块，专门用来处理路径问题
const os = require("os");

const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //编译时生成index.html
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 将css文件以单文件link方式引入 避免出现闪屏现象

const threads = os.cpus().length;
//启动命令  npx webpack serve --config ./config/webpack.dev.js

module.exports = {
  // 入口
  entry: "./src/main.js", //相对路径

  // 输出
  output: {
    // 文件的输出路径
    // 开发模式 没有输出
    path: undefined,
    // 入口文件打包的文件名
    filename: "js/main.js",
  },
  // webpack 热更新   使用devServe后运行命令为 npx webpack serve   ctrl+c 终止批处理操作
  // 开发服务器：不会输出资源，在内存中编译打包
  devServer: {
    host: "localhost",
    port: "4057",
    hot: true, // 表示启用热模块替换，不用刷新整个页面
    open: true, //自动打开浏览器
  },
  //加载器
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
          // style-loader 将js中的css通过创建style标签添加html文件中生效
          // css-loader  将css资源编译成common.js的模块到js中
          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] }, // use执行顺序 从右到左、从上到下
          { test: /\.ts$/, use: "ts-loader" },
          {
            test: /\.s[ac]ss$/i,
            use: [
              // 将 JS 字符串生成为 style 节点
              MiniCssExtractPlugin.loader,
              // 将 CSS 转化成 CommonJS 模块
              "css-loader",
              // 将 Sass 编译成 CSS
              "sass-loader",
            ],
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                // 不需要下载 loader webpack5内置处理
                // 小于10kb 的图片转base64
                // 优点 减少请求的数量  缺点 体积会大一点点
                maxSize: 10 * 1024, // 10kb
              },
            },
            generator: {
              //打包后指定图片路径
              // [hash:10] hash值取前十位
              filename: "imgs/[hash][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2?|mp3|mp4)$/,
            type: "asset/resource", //转base64 用asset
            generator: {
              //打包后指定文字路径
              filename: "media/[hash][ext][query]",
            },
          },
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
              {
                loader:"thread-loader",
                options:{
                  works:threads
                }
              },
              {
                loader: "babel-loader",
                // 下面presets对于babel的预设处理 可以写到babel.config.js 文件中 也可以在此处
                options: {
                  // presets: ["@babel/preset-env"],
                  cacheDirectory: true, // 开启babel缓存
                  cacheCompression: false, //  关闭缓存文件压缩
                },
              },
            ],
          },
        ],
      },
    ],
  },

  //插件
  // plugin的配置
  plugins: [
    new ESLintPlugin({
      context: path.resolve(__dirname, "../src"), //检查文件
      cache:true,
      threads,
    }),
    new HtmlWebpackPlugin({
      //模版，以public/index.html文件为模版创建新的html文件
      //新的html文件特点：1结构和原来一致，2.自动引入打包输出的资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  //模式
  mode: "development",
  devtool: "cheap-module-source-map",
};

webpack优化

webpack优化-见下篇

相关推荐
GISer_Jing2 小时前
前端面试通关：Cesium+Three+React优化+TypeScript实战+ECharts性能方案
前端·react.js·面试
落霞的思绪3 小时前
CSS复习
前端·css
咖啡の猫5 小时前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲7 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5818 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路8 小时前
GeoTools 读取影像元数据
前端
ssshooter9 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
你的人类朋友9 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
Jerry9 小时前
Jetpack Compose 中的状态
前端
dae bal10 小时前
关于RSA和AES加密
前端·vue.js
热门推荐
01UV安装并设置国内源02蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04KGG转MP3工具|非KGM文件|解密音频05【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）062025最新国内服务器可用docker源仓库地址大全（2025年8月更新）07TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！10TRAE Rules 实践：为项目配置 6A 工作流