webpackCss处理14--webpack入门学习

最新推荐文章于 2024-07-28 00:56:04 发布
最新推荐文章于 2024-07-28 00:56:04 发布
阅读量660 收藏 8
点赞数 15
分类专栏： webpack 文章标签： webpack 前端 javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g841805/article/details/139860115
版权

Css 处理

提取 Css 成单独文件

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

我们应该是单独的 Css 文件，通过 link 标签加载性能才好

1. 下载包

npm i mini-css-extract-plugin -D

2. 配置

  • webpack.prod.js 
    const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

3. 运行指令

npm run build

Css 兼容性处理

1. 下载包

npm i postcss-loader postcss postcss-preset-env -D

2. 配置

  • webpack.prod.js 
    const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "stylus-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

3. 控制兼容性

我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

{
  // 其他省略
  "browserslist": ["ie >= 8"]
}

想要知道更多的 browserslist 配置，查看browserslist 文档

以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

4. 合并配置

  • webpack.prod.js 
    const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

5. 运行指令

npm run build

Css 压缩

1. 下载包

npm i css-minimizer-webpack-plugin -D

2. 配置

  • webpack.prod.js 
    const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    // css压缩
    new CssMinimizerPlugin(),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

3. 运行指令

npm run build


 

_xiyang
关注
专栏目录
使用Webpack处理CSS文件
maxandcc的博客
07-27 452
同前几篇文章一样，首先需要在自己的项目目录下初始化自己的npm（命令：npm init），然后下载依赖的包(npm install webpack webpack-cli) 初始化完成后，创建配置文件（webpack.config.js），轻车熟路了哈 好了，让我们run以下试试： 这时候可以看到报错了，说的是您需要一个loader处理该类型文件，这时候就联想到之前说的：loader是处理非js文件的。所以我们需要下载loader的包。这里需要下载css-loader（n...
image-minimizer-webpack-plugin：Webpack加载器和插件，用于使用imagemin压缩图像
02-06
image-minimizer-webpack-plugin 该插件使用优化图像。 入门 首先，您需要安装image-minimizer-webpack-plugin ： $ npm install image-minimizer-webpack-plugin --save-dev 可以用两种模式优化图像： （无质量...
webpack 处理CSS
weixin_34000916的博客
09-15 128
1、安装插件 npm i style-loader css-loader --save-dev npm i postcss-loader --save-dev npm i autoprefixer --save-dev npm install postcss-import --save-dev style-loader插件为：通过注入<style>标签将CSS添加到D...
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 4830
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
webpack的css处理
weixin_34247299的博客
11-01 161
webpack打包处理css的时候需要两个loader: style-loader 和css-loader 安装： 1 npm install style-loader css-loader --save-dev style-loader：负责将打包生成的代码嵌入到html页面中. css-loader:是允许将css文件引入到.js文件中； 简单的打包css的webpack.config.j...
Webpack 的应用（一）--处理 CSS 文件
小白小白从不日别的博客
06-15 199
一、
webpack中处理css文件
xYY_X_xYY的博客
08-04 1204
文章目录一、引入webpack1. 创建如下目录文件2. 打开本文件目录下的控制台，初始化项目3. 安装webpack需要的包4. 配置webpack二、 需要引入合适的依赖来让引入css文件1. 安装`css-loader`依赖，识别js文件中引入的css文件2. 在`webpack.config.js`里配置依赖3. 而这样之后，只是能识别css文件，无法识别css样式；我们需要继续引入依赖；有两种方式引入，style标签和link标签；以下分别对两种方式展开讲解三、 将css打包到页面的style标签
imagemin-webp-webpack-plugin:Webpack插件，可将图像转换为WebP格式，同时保留原始文件
05-01
imagemin-webp-webpack-plugin Webpack插件，可将图像转换为格式，同时保留原始文件。 专为webpack 4构建，但也应在以前的版本中工作。 它在引擎盖下使用和 。 动机 尽管目前并非所有浏览器都支持WebP图像，但它们...
base-href-webpack-plugin:Webpack插件，用于在头块中插入基本href标记
05-12
base-href-webpack-plugin（扩展名） 扩展，以编程方式插入或更新<base href="" />标记。 先决条件 该插件是的扩展。 因此，请确保已安装npm i --save-dev html-webpack-plugin 。 安装 对于webpack v5，请...
monaco-editor-esm-webpack-plugin
05-30
monaco-editor-esm-webpack-plugin 它依赖于 。 如果你想复制一个带有本地化的 monaco 编辑器，你可以看到 用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。 安装 npm install monaco-editor-...
npm-dts-webpack-plugin:Webpack插件生成单个dts文件以捆绑TypeScript NPM软件包
05-19
npm-dts-webpack-plugin 该WebPack插件为整个NPM软件包生成单个index.d.ts文件。 它允许创建捆绑的NPM库软件包，而无需使用TypeScript源，并且无论这些库被导入到哪里，都仍然保留代码建议。 TypeScript自动获取...
webpack处理css资源
m0_68997646的博客
11-01 873
webpack处理css资源
前端必备技能 webpack - 4. webpack处理CSS资源
qq_39506551的博客
10-26 379
前端必备技能 webpack - 4. webpack处理CSS资源 一、打包资源 1.1 打包 .css 资源 1.2 打包 .less 资源 1.3 打包 .sass 资源 1.4 总结 二、提取 2.1 提取样式到单独 css 文件 2.2 打包公共样式 三、压缩 四、消除无用 css 五、兼容性处理 ;;;因为 `webpack` 本身只具有识别 `JS` 的能力，所以涉及到其他资源，需要我们通过 `loader` 来进行特殊处理，针对不同的样式资源，需要以下几个 `loader`：
Webpack处理css
YJH15888673903的博客
04-21 110
webpack处理css文件报错解决方法
webpack学习笔记（五）：处理css样式文件
Hoshizola的博客
12-10 683
在一开始认识webpack已经知道webpack可以将所有资源作为一个个的模块进行处理，包括js/json/css/图片...等。然而，它只能将js/json作为模块打包处理。比如，我们在src下创建一个css目录，再创建一个index.css文件，内容如下： 在index.html引入该css文件： 配置文件如下： const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.e
webpack样式处理 — css插件
weixin_42260975的博客
09-03 992
webpack样式处理 — css插件 一、 处理css文件 有了html文件后，我们想给页面增加一些css样式，此时我们就需要在js文件中引入我们需要的css文件： require('./index.css') 运行npm run dev，此时因为js里无法解析css文件所以会报错： 解决方法： 先安装css插件： yarn add css-loader style-loader -D ...
webpack基础 -- css相关处理
彩虹
07-13 166
css的处理 相关loader : 1.style-loader(处理标签, 生成插入html) –&amp;gt; style-loader/url style-loader/useable 2.css-loader (处理js引入css) 安装: npm install style-loader css-loader –save-dev 准备页面: app.j...
webpack之css文件处理
weixin_45538554的博客
04-03 211
项目开发过程中，我们必然要添加很多样式，而样式往往在一个单独的文件中。基于webpack模块化编程，我们不用再在head标签中引入多个css文件，那样是很麻烦的，那种方法已经过时了。我们应该将其bundle.js中，即让bundle.js依赖所有样式文件 因为入口文件只有一个main.js所以我们得在其中引入样式文件 require('./css/normal.css') 1npm instal...
vue-cli中webpack配置详解：入门与新版本对比
总结起来，本文对vue-cli的webpack配置提供了实用的入门指导，帮助开发者深入了解如何利用这套工具进行项目的构建和调试，特别是对于那些希望通过调整webpack配置以优化性能或实现特定功能的开发者，这篇文章提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值