Webpack 3.9.1 - LESSファイルを1つのCSSファイルに結合するにはどうすればよいですか？

Question

私はWebpackにはとても新しいですし、私はLESSをどう扱うべきかわかりません。私は多くのLESSファイルを持っていたいと思います。私はnpm run buildを実行した後、それらを1つの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()] 
}; 

はどのように正確に私はそれが1つのCSSファイルにすべてのLESSファイルを結合するためにWebPACKのを設定しますか。

Answer 1

これを実現するには、extract-text-webpack-pluginというプラグインを使用できます。ドキュメントによれば、このプラグインは、エントリチャンク内の必要なすべての*.cssモジュールを別々のCSSファイルに移動します。したがって、スタイルはJSバンドルにインライン化されず、別のCSSファイル（styles.css）にインライン展開されます。今の場合、まずあなたの.lessファイルを構文解析して.cssにしてから、それらを1つのファイルにまとめなければなりません。

あなたはそうのようなあなたの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"), 
]}; 

Answer 2

あなたは1つのcssファイルを作成するextract-text-webpack-pluginを使用することができます。しかし、あなたが開発している間ではなく、プロダクションビルドのためにこれを行うだけです。

Webpack less-loaderを使用して調べます。それは生産ビルドをカバーしますhere