Concat並使用Webpack縮小所有較少的文件而不導入它們

Question

我有一個大約20個單獨的文件的文件夾，我需要通過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條目文件中，我會得到一個更少的錯誤，說明我聲明的變量越少被識別，這就是我得出的結論，我需要事先將這些文件連接起來。 我來自gulp背景，所以任何幫助讓我開始和運行的人將不勝感激。

如果有一種替代方法可以將所有較少編譯到css並正常工作，而不需要concat，那么我願意接受建議。

Answer 1

Webpack是一個模塊捆綁器，它使用JavaScript（ES6，CommonJS，AMD ..），CSS（@import，url）甚至HTML（通過src屬性）的模塊語法來構建應用程序的依賴關系圖，然后在幾個包中序列化它。

在您的情況下，當您導入* .less文件時，錯誤是因為您錯過了CSS模塊 。 換句話說，在您使用其他文件中定義的變量的位置，該文​​件不是@import -ed。

使用Webpack，建議模塊化所有內容，因此我建議添加缺少的CSS模塊。 當我將項目從Grunt遷移到Webpack時，我遇到了同樣的問題。 其他臨時解決方案是創建一個index.less文件，您將在其中@import所有較少的文件（注意：順序很重要），然后在app的條目文件（例如boot.ts）中導入該文件。