使用 Webpack 连接并缩小所有较少的文件而不导入它们

Posted 2023-03-13

【中文标题】使用 Webpack 连接并缩小所有较少的文件而不导入它们

【英文标题】：Concat and minify all less files with Webpack without importing them

【发布时间】：2017-12-04 09:57:31

【问题描述】：

我有一个包含大约 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 入口文件，我会收到一个 less 错误，指出我声明的 less 变量未被识别，这就是我得出结论的方式我需要事先连接这些文件。我来自 gulp 背景，所以任何帮助我启动并运行它都将不胜感激。

如果有另一种方法可以将所有更少的内容编译为 css 并正常工作，而不需要 concat，那么我愿意接受建议。

【参考方案1】：

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

在您的情况下，当您导入 *.less 文件时，错误是因为您错过了CSS modules。换句话说，在您使用其他文件中定义的变量的地方，该文件不是 @import-ed。

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

【讨论】：

谢谢！正如您所提到的，我最终将所有较少的文件导入到单个 site.less 文件中。