[英]Webpack output buffer injected into CSS - how to prevent?
Edit: This issue is now null (at least for me).编辑:这个问题现在是 null(至少对我来说)。 I figured out my upgrade malfunction.
我发现我的升级故障。
Webpack v4.31.0 Webpack v4.31.0
I'm not a guru.我不是大师。 I tried to upgrade to v5 and everything broke.
我试图升级到 v5,一切都坏了。 I'm on deadline, so please limit advice to v4 if at all possible.
我已经到了最后期限,所以如果可能的话,请将建议限制在 v4 上。
Given this webpack.config.js
to compile a SCSS file:鉴于此
webpack.config.js
编译 SCSS 文件:
// const js removed for simplicity
const css = {
entry: {
'frontend.css': `${__dirname}/src/scss/frontend.scss`,
},
output: {
path: `${__dirname}/css`,
filename: '[name]'
},
module: {
rules: [
{
test: /\.scss$/,
exclude: /node_modules/,
// module chain executes from last to first?
use: [
{
loader: 'file-loader',
options: { name: '[name].css', outputPath: '../css/' }
},
// how to minimize?
{ loader: "remove-comments-loader" },
{ loader: 'extract-loader' },
{ loader: 'css-loader', options: { url: false, sourceMap: false } },
{ loader: 'resolve-url-loader' },
{ loader: 'sass-loader', options: { sourceMap: false } }
]
},
]
}
};
// Return array of configurations
module.exports = function () {
return exportModules( [css] );
};
/**
* Merge filetype configs with shared config and return them as an array of objects.
* @param objs
* @return {Array}
*/
const exportModules = ( objs ) => {
const objArr = [];
for ( let i = 0; i < objs.length; i++ ) {
objArr.push( {
...config(),
...objs[i]
} );
}
return objArr;
};
// Shared config options
const config = function () {
return {
mode: 'development',
stats: {
// is there a preset that does this?
colors: true,
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: false,
errorDetails: false,
warnings: false,
publicPath: false
}
}
};
and this command in the config root directory:和配置根目录中的这个命令:
$ webpack
The resulting CSS file is being compiled and rendered with a bunch of what appear to be statements from lib/MainTemplate.js生成的 CSS 文件正在编译和渲染,其中包含来自lib/MainTemplate.js的一堆语句
/*** see below ***/
#splash-overlay {
position: fixed;
z-index: 25000000;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #120016;
display: flex;
justify-content: center;
align-items: center;
}
.splash-link {
text-align: center;
display: inline-block;
width: 100%;
}exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/
This behavior is not consistent, in that sometimes different statements are output, sometime none at all.这种行为并不一致,因为有时不同的语句是 output,有时根本没有。 Is there a way to bypass this output in the config object?
有没有办法在配置 object 中绕过这个 output? Am I doing something wrong?
难道我做错了什么?
It seem to me that there could be a bug within exportModules
function.在我看来,
exportModules
function 中可能存在错误。 I ain't sure, especially that I use webpack v5, but it may not merge correctly, overriding or duplicating some shared configs.我不确定,尤其是我使用 webpack v5,但它可能无法正确合并,覆盖或复制一些共享配置。
Maybe you should use webpack-merge package to solve this, then it could look, like也许你应该使用 webpack-merge package 来解决这个问题,然后它可能看起来像
/* Top of the file */
const { merge } = require('webpack-merge');
modules.export = merge(config(), css, js);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.