使用Webpack将Concat和所有少量文件缩小，而无需导入 [英] Concat and minify all less files with Webpack without importing them

问题描述

我有一个文件夹大约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']}，
输出：{
路径：path.join（__ dirname，bundleOutputDir），
 filename：'[name] .js'，
 publicPath：'/ dist /'
}，
 module：{
 rules：[
 {test：/\tsts/，include：/ ClientApp / ，使用：'awesome-typescript-loader？silent = true'}，
 {test：/\.html$/，use：'raw-loader'}，
 {test：/ \ .css $ /，使用：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？限制= 25000'} 
] 
}，
 plugins：[
 new CheckerPlugin（），
 new webpack.DllReferencePlugin（{
 context：__dirname， 
 manifest：require（'./ wwwroot / dist / vendor-manifest.json'）
}）
] .concat（isDevBuild？[
 //适用于开发中的插件仅构建
 new webpack.SourceMapDevToolPlugin（{
 filename：'[file] .map'，//如果您喜欢内联源映射，则删除此行
 moduleFilenameTemplate：path.relative（bundleOutputDir， [resourcePath]'）//将sourcemap条目指向磁盘上的原始文件位置
}）
]：[
 //仅适用于生产版本的插件
 new webpack.optimize.UglifyJsPlugin（），
 new ExtractTextPlugin（'site.less'），
 new ExtractTextPlugin（'site.css'）
]）
}]; 
}; 
  

如果我尝试将每个单独的.less文件导入boot.ts条目文件，我得到一个较少的错误表明，我声明的较少的变量不被识别，这是我如何得出结论，我需要事先连接这些文件。我来自一个gulp背景，所以任何帮助，让我和运行与此将不胜感激。

如果有一种替代方法可以减少编译成css并正常工作，而不需要concat，那么我可以接受建议。

解决方案

Webpack是一个模块绑定器，并使用JavaScript（ES6，CommonJS，AMD ..），CSS（@import，url）甚至HTML（通过src属性）构建应用程序的依赖关系图，然后将其序列化成几个包。

在您的情况下，导入 *时。较少文件的错误是因为您错过了 CSS模块。换句话说，在使用其他文件中定义的变量的位置，该文​​件不是 @import -ed。

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

I have a folder of around 20 separate less files that I need to concatenate into a single file via Webpack and store this in my /dist folder. My current Webpack config file is as follows:

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')
            ])
    }];
};

If I try and import each single .less file into the boot.ts entry file, I get a less error stating that the less variables that I've declared are not being recognised, which is how I came to the conclusion that I need to concat these files beforehand. I come from a gulp background, so any help to get me up and running with this would be greatly appreciated.

If there is an alternative way to get all less compiled to css and working correctly, without the need for concat, then I'm open to suggestions.

解决方案

Webpack is a module bundler and uses the module syntax for JavaScript (ES6, CommonJS, AMD..), CSS (@import, url) and even HTML (through src attribute) to build the app's dependency graph and then serialize it in several bundles.

In your case, when you import the *.less files the errors are because you miss CSS modules. In other words, on the places where you have used variables defined in other file, that file was not @import-ed.

With Webpack it's recommended to modularize everything, therefore I would recommend to add the missing CSS modules. I had the same issue when I was migrating a project from Grunt to Webpack. Other temporary solution is to create an index.less file where you will @import all the less files (note: the order is important) and then import that file in app's entry file (ex. boot.ts).

这篇关于使用Webpack将Concat和所有少量文件缩小，而无需导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！