javascript - 注入 CSS 的 Webpack 输出缓冲区 - 如何防止?
问题描述
编辑:这个问题现在是空的(至少对我来说)。我发现我的升级故障。
Webpack v4.31.0
我不是大师。我试图升级到 v5,一切都坏了。我已经到了最后期限,所以如果可能的话,请将建议限制在 v4 上。
鉴于此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
}
}
};
和配置根目录中的这个命令:
$ webpack
生成的 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);
/******/
这种行为并不一致,有时会输出不同的语句,有时根本不会输出。有没有办法绕过配置对象中的这个输出?难道我做错了什么?
解决方案
在我看来,exportModules
函数中可能存在错误。我不确定,尤其是我使用 webpack v5,但它可能无法正确合并,覆盖或复制一些共享配置。
也许你应该使用 webpack-merge 包来解决这个问题,然后它可能看起来像
/* Top of the file */
const { merge } = require('webpack-merge');
modules.export = merge(config(), css, js);
推荐阅读
- sql - SQL中百分比计算的简单方法是什么?
- android - setOnClickListener RecyclerView 适配器中的 notifyDataSetChanged
- sql - 将数据限制在数据库中的一个表中是更快还是更少内存?
- javascript - 谷歌脚本在包含电子邮件地址的字符串中转义字符时遇到问题
- sql-server - 使用可用性组和复制重新启动 SQL 节点的正确方法
- php - 将中间件应用到此资源组
- haskell-stack - 使用`stack build`构建时如何为FFI捕获Haskell的库依赖项?
- c - Flex Start Condition 意外结果
- javascript - 使用 node-fetch 将带有 GET 和 data-urlencode 选项的 cURL 命令转换为 javascript
- phpstorm - 如何让 PhpStorm 的主要标签不那么粗体