gpt4 book ai didi

javascript - 使用 Webpack 连接并缩小所有 less 文件而不导入它们

转载 作者:搜寻专家 更新时间:2023-10-30 21:10:31 25 4
gpt4 key购买 nike

我有一个包含大约 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 背景,所以任何帮助我启动和运行它的人都将不胜感激。

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

最佳答案

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

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

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

关于javascript - 使用 Webpack 连接并缩小所有 less 文件而不导入它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44846479/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com