Edit: This issue is now null (at least for me). I figured out my upgrade malfunction.
Webpack v4.31.0
I'm not a guru. I tried to upgrade to v5 and everything broke. I'm on deadline, so please limit advice to v4 if at all possible.
Given this webpack.config.js
to compile a SCSS file:
// 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
/*** 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. Is there a way to bypass this output in the config object? Am I doing something wrong?
It seem to me that there could be a bug within exportModules
function. I ain't sure, especially that I use webpack v5, but it may not merge correctly, overriding or duplicating some shared configs.
Maybe you should use webpack-merge package to solve this, then it could look, like
/* Top of the file */
const { merge } = require('webpack-merge');
modules.export = merge(config(), css, js);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.