webpack构建less文件输出一个压缩的css文件

Question

Webpack是否是我需要的工具，可以将多个less文件传递到一个压缩的CSS文件中吗？如果是，那么我在下面的代码中做错了什么还不确定。有没有一种输出到不同文件路径的方法，现在我的js文件输出到'./assets/javascripts/bundle/'，我想让我的css文件输出到“./assets/stylesheets/bundle/”，我该怎么做？

更新：我进行了测试，可以将我的less文件构建为一个css文件，但仍然找不到如何设置输出文件夹的多个路径，现在我必须注释掉js条目部分并更改输出路径...

webpack配置

var path = require('path');
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    'MediaIndex':['./assets/javascripts/Media/Index/Base.js'],
    // stylesheets
    'MediaIndexStyleSheet':['./assets/stylesheets/Media/Index/Base.js']
  },
  output: {
    path: './assets/javascripts/bundle/',
    filename: '[name].js'
  },
  resolve: {
    alias: {
      jquery: path.join(__dirname, "assets/javascripts/lib/jquery-1.11.1.min.js"),
      "jquery-ui": path.join(__dirname, "assets/javascripts/lib/jquery-ui.min.js"),
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    }),
    new ExtractTextPlugin("[name].css")
  ],
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
      }
    ]
  },
};

assets/stylesheets/Media/Index/Base.js

require('../../../Global/Config.less');
require('../../../Global/Fp.less');
require('../../../Global/Urb.less');
require('../../../Global/Ad1.less');
require('./Nav0.less');
require('./Index.less');
require('./Content.less');

Config.less

@color: 'red';

Index.less

body {
  background-color: @{color};
}

- user1775888

Answer 1

你已经接近成功了。就像你之前所做的那样，你可以使用ExtractTextPlugin将所有的样式文件放在一个CSS文件中。如果您想将JS和CSS文件放在不同的目录中，您可以使用ExtractTextPlugin或output.filename定义一个相对于output.path的路径即可。例如：

output: {
    path: './assets',
    filename: './javascripts/bundle/[name].js'
},
plugins: [
    new ExtractTextPlugin("./stylesheets/bundle/[name].css")
]

- trekforever

---

谢谢回复，这个可行！我在想是否可以将CSS文件名设置为与JavaScript文件名相同，现在我必须在输入时在文件名后添加StyleSheet。 - user1775888