Мы используем webpack для объединения наших ресурсов перед развертыванием. Тем не менее, теперь мы хотим также связать наши sass-файлы через веб-пакет, поскольку это упрощает процесс сборки. Теперь у нас есть проблема, когда MiniCssExtractPlugin утверждает, что webpack_require не определен.
Мы не имеем ни малейшего представления о том, почему это происходит, но их основная проблема, кажется, связана с css-код загрузчика.
Мы пытались решить эту проблему многими способами (например, пробовать разные версии, переустанавливать пакеты, проверять оставшиеся глобальные пакеты и т. Д. Но, похоже, ни один из них не оказал никакого влияния на результат.
Спасибо за любую помощь заранее.
ошибка:
ERROR in ./css/theme.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function
at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:123:63)
at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4919:41)
at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4809:28)
at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
at ****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:85:18
at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:88:10)
at Module._compile (****project/_dev/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at exec (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:60:10)
at childCompiler.runAsChild (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:153:14)
at compile (****project/_dev/node_modules/webpack/lib/Compiler.js:343:11)
at hooks.afterCompile.callAsync.err (****project/_dev/node_modules/webpack/lib/Compiler.js:681:15)
at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
at compilation.seal.err (****project/_dev/node_modules/webpack/lib/Compiler.js:678:31)
at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
at hooks.optimizeAssets.callAsync.err (****project/_dev/node_modules/webpack/lib/Compilation.js:1423:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (****project/_dev/node_modules/webpack/lib/Compilation.js:1414:32)
at _promise1.then._result1 (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
at process._tickCallback (internal/process/next_tick.js:68:7)
@ multi ./js/global.js ./css/theme.scss global[1]
webpack.config.js
const path = require('path');
const AssetsPlugin = require('assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const SriPlugin = require('webpack-subresource-integrity');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "production",
entry: {
runtime: ['./js/runtime.js', './css/inline.scss'],
vendor: ['./js/vendor.js']
},
output: {
path: path.resolve(__dirname, '../assets/js'),
filename: '[name].[contenthash].js',
crossOriginLoading: 'anonymous'
},
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
minChunks: 2
}
}
},
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
extractComments: '/@extract/i'
}),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', {discardComments: { removeAll: true } }],
}
})
]
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader'
}],
include: [
path.resolve('js'),
path.resolve('node_modules')
],
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
indentWidth: 4,
includePaths: ['css/*/'],
},
},
},
]
}
]
},
plugins: [
new SriPlugin({
hashFuncNames: ['sha256', 'sha384'],
enabled: true
}),
new AssetsPlugin({
filename: 'assets.json',
integrity: true,
prettyPrint: true,
path: path.resolve(__dirname, '../config')
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[name].[contenthash].css'
}),
new CleanWebpackPlugin(),
new FixStyleOnlyEntriesPlugin()
]
};
Package.json
{
"dependencies": {
"@babel/core": "7.6.4",
"@babel/polyfill": "^7.6.0",
"babel-loader": "8.0.6",
"core-js": "^3.3.2",
"css-loader": "^3.2.0",
"jquery": "^3.4.0",
"mini-css-extract-plugin": "^0.8.0",
"modernizr-webpack-plugin": "^1.0.7",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"path": "^0.12.7",
"postcss-loader": "^3.0.0",
"promise-polyfill": "^8.1.3",
"regenerator-runtime": "^0.13.3",
"sass": "^1.22.12",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"swiper": "^5.1.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-fix-style-only-entries": "^0.4.0",
"webpack-subresource-integrity": "^1.3.4",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/preset-env": "7.6.3",
"assets-webpack-plugin": "^3.9.10",
"clean-webpack-plugin": "^3.0.0"
}
}