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优化-见下篇

相关推荐
速盾cdn6 分钟前
速盾：vue的cdn是干嘛的？
服务器·前端·网络
四喜花露水38 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS： 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全：从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础：底部固定，导航栏浮动在顶部
前端·css·css3
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生2 小时前
回调数据丢了？
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie：Web 开发中的客户端存储小数据
前端·安全·web
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测05RAG 实践- Ollama+RagFlow 部署本地知识库06【经验分享】Ubuntu22.04安装微信(linux官方版)07Macbook pro M1 安装Ubuntu教程08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09Windows10安装PCL1.14.0及点云配准10文件或文件夹名称中有空格如何批量去除