在 Webpack 中如何配置 LESS 的抽取？-JavaScript中文网-JavaScript教程资源分享门户

在 Webpack 中如何配置 LESS 的抽取？

前端开发中最常用的一个工具就是 Webpack，它的灵活性和可扩展性为我们的开发提供了很大的帮助。在项目中使用 LESS 进行样式定义，但是在 Webpack 中如何配置 LESS 的抽取呢？本文将为大家详细介绍。

1、安装依赖

在使用 LESS 进行开发之前，需要先解决 Less 编译的问题。因此我们需要安装相关的依赖。

npm install less-loader less --save-dev

2、配置 Webpack

将 LESS 视为一个模块来处理，这需要在 Webpack 中设置相应的配置信息。使用 less-loader 并将 style-loader 和 css-loader 与其配合使用，以确保在应用样式之前对 LESS 进行编译和解析。

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader" // 将 JS 字符串生成为 style 节点
          },
          {
            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
          },
          {
            loader: "less-loader" // 编译 Less 文件为 CSS
          }
        ]
      }
    ]
  }
}

3、抽取 CSS

使用 mini-css-extract-plugin 插件可以将 CSS 从 JS 中抽取出来并分离到单独的 CSS 文件中。这样做的好处是可以避免样式文件的体积过大，提高页面渲染速度。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          {
            loader: "css-loader"
          },
          {
            loader: "less-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash].css", // 输出文件名
    })
  ]
}

4、优化抽取

虽然使用 MiniCssExtractPlugin 插件已经能够将 CSS 和 JS 文件分离开来。但是在开发过程中通常会有很多 CSS 文件，因此为了避免文件被重复输出，需要进行相应的优化。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          {
            loader: "css-loader"
          },
          {
            loader: "less-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash].css",
      chunkFilename: "css/[id].[contenthash].css" // 避免重复输出 CSS 文件
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "style",
          test: /\.css$/,
          chunks: "all",
          enforce: true
        }
      }
    }
  }
}

5、总结

以上就是如何在 Webpack 中配置 LESS 的抽取的方法，随着前端开发的高速发展，Webpack 已经成为必备工具，了解 Webpack 配置方法对于我们的开发工作非常重要。希望本文能对大家有所帮助。

示例代码：https://github.com/Cupcake-kate/LESS-Extract-in-Webpack

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a2563cadd4f0e0ffa75ab9

在 Webpack 中如何配置 LESS 的抽取？

纠错反馈