html - Webpack 3.9.1 - 如何将 LESS 文件合并到一个 CSS 文件中？

Question

我对 Webpack 很陌生，我不确定如何处理 LESS。我想要有许多 LESS 文件，并且希望在运行 npm run build 后将它们编译成一个 CSS 文件。这将生成一个包含所有内容的 style.css 文件。

我的webpack.config.js看起来像这样:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: 
        [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader", // creates style nodes from JS strings
                    path: path.resolve(__dirname, 'src')
                }, {
                    loader: "css-loader", // translates CSS into CommonJS
                    path: path.resolve(__dirname, 'src')
                }]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }
        ]

    },
    plugins: [new HtmlWebpackPlugin()]
};

我到底如何配置 webpack 以将所有 LESS 文件合并到一个 CSS 文件中？

Answer 1

您可以使用名为 extract-text-webpack-plugin 的插件来实现此目的。根据他们的文档，这个插件将条目 block 中所有必需的 *.css 模块移动到一个单独的 CSS 文件中。因此，您的样式不再内联到 JS 包中，而是内联到单独的 CSS 文件 (styles.css) 中。当然，现在，就您的情况而言，您首先必须将 .less 文件解析为 .css，然后将它们捆绑到一个文件中。

你可以像这样修改你的 webpack 配置:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /\.less$/,
      use: ExtractTextPlugin.extract({ <---- Use the plugin here to extract the styles
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: ['file-loader']
    },
    {
      test: /\.json$/,
      loader: 'json-loader'
    }
  ]
},
plugins: [
  new HtmlWebpackPlugin(),
  new ExtractTextPlugin("styles.css"),
]};