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配置实例

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: