webpack5 打包分离 less

Webpack 5 中打包分离 Less 文件通常是为了优化静态资源加载，提高网站性能。Less 是一种 CSS 预处理器语言，它允许编写更模块化、可维护的 CSS 代码。以下是使用 Webpack 5 将 Less 文件分离并打包的基本步骤：

1. 安装依赖：首先需要安装 `less-loader` 和 `css-loader`，它们分别用于处理 Less 文件和将 CSS 输出到单独文件。在项目根目录下运行：

   npm install --save-dev less-loader css-loader style-loader extract-text-webpack-plugin (已废弃，推荐使用 mini-css-extract-plugin)

2. 配置 loader：在 `.webpack.config.js` 或者配置文件中添加对 Less 的 loader 配置。例如，使用 `mini-css-extract-plugin` 和 `css-loader`:

   module.exports = {
     // ...其他配置...
     module: {
       rules: [
         {
           test: /\.less$/,
           use: [
             miniCssExtractPlugin.loader,
             'css-loader',
             'less-loader'
           ]
         }
       ]
     },
     plugins: [
       new MiniCssExtractPlugin({
         filename: '[name].css', // 输出文件名
         chunkFilename: '[id].css' // 如果按 chunk 分离，则输出文件名
       })
     ]
   };

3. 引入 Less：在你的 JavaScript 或 TypeScript 模块中引入 Less 样式文件，如：

   import './styles/main.less';

4. 部署应用：当构建完成后，Webpack 会生成一个单独的 CSS 文件（`.css`），这将在生产环境中更好地缓存和压缩。