使用Webpack合并和压缩所有Less文件，而无需导入它们。

Question

我有一个包含20个不同less文件的文件夹，需要通过Webpack将它们合并成单个文件，并将其存储在/dist文件夹中。我当前的Webpack配置文件如下：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';


module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        stats: { modules: false },
        entry: { 'main': './ClientApp/boot.ts' },
        resolve: { extensions: ['.js', '.ts'] },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: '/dist/'
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.html$/, use: 'raw-loader' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
                { test: /\.less/, use: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader') },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin(),
                new ExtractTextPlugin('site.less'),
                new ExtractTextPlugin('site.css')
            ])
    }];
};

如果我尝试将每个单独的.less文件导入到boot.ts入口文件中，我会收到一个less错误，指出我声明的less变量无法被识别，这就是我得出需要预先连接这些文件的结论的原因。 我来自于gulp背景，所以任何帮助让我开始运行都将不胜感激。

如果有其他方法可以使所有less编译为css并正常工作，而无需连接，则我愿意听取建议。

- Jamie Mclaughlan

Answer 1

Webpack是一个模块打包工具，它使用JavaScript（ES6，CommonJS，AMD...），CSS（@import，url）甚至HTML（通过src属性）的模块语法来构建应用程序的依赖关系图，然后将其序列化为几个捆绑包。

在您的情况下，当您导入*.less文件时，错误是因为您缺少CSS模块。换句话说，在您使用其他文件中定义的变量的地方，该文件没有被@import引用。

使用Webpack推荐模块化一切，因此我建议添加缺失的CSS模块。当我将一个项目从Grunt迁移到Webpack时，我也遇到了同样的问题。另一个临时解决方案是创建一个index.less文件，其中您将@import所有less文件（注意：顺序很重要），然后在应用程序的入口文件（例如boot.ts）中导入该文件。

- S.Klechkovski

---

谢谢！最终我按照你所提到的方法，将所有的less文件都导入到一个名为site.less的文件中。 - Jamie Mclaughlan