Question

我尝试了各种配置。我设法将我的jsx代码转换为捆绑的JS，所以这似乎有效。

现在我正在尝试将我的.less文件捆绑到/ wwwroot /

中的单个捆绑.css文件中

我尝试在线搜索的每个来源都显示了他们复制过的3个不同来源中的1个，但我无法使用这些来源。

如何让webpack捆绑更少的文件并将其捆绑到/ wwwroot /中的单个css文件中？

我的文件结构：

/wwwroot/ /* wwwroot, public files*/
/Content/css/ /* .less files */
/Content/jsx/ /* .jsx files */

我的webpack配置：

"use strict";
var glob = require("glob");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        app: glob.sync("./Content/*/*.jsx")
    },
    output: {
        filename: "./wwwroot/[name].min.js"
    },
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 9000
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: "babel-loader"
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    use: "less-loader"
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "./wwwroot/[name].min.css"
        }),
    ],
};

这是输出：

Version: webpack 2.5.1
Time: 322ms
               Asset     Size  Chunks             Chunk Names
./wwwroot/app.min.js  2.75 kB       0  [emitted]  app
   [0] ./Content/jsx/app.jsx 0 bytes {0} [built]
   [1] multi ./Content/jsx/app.jsx 28 bytes {0} [built]
Process terminated with code 0.

Answer 1

为您的ExtractTextPlugin添加fallback选项，并在您的加载器列表中添加css-loader。如果您还没有style-loader，请安装npm install --save-dev style-loader。

{
  test: /\.less$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'less-loader']
  })
}

Webpack不会减少捆绑到css？

1 个答案: