Ковыряю сейчас webpack 5 и столкнулся с такой проблемой.
При сборке в режиме production
(webpack --mode=production
) все работает замечательно сборка идет отлично, но вот в режиме development
(webpack --mode=development --watch
) получаю такую ошибку:
[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (C:\openserver\domains\test.js\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:112:10)
at SourceMapDevToolModuleOptionsPlugin.apply (C:\openserver\domains\test.js\node_modules\webpack\lib\SourceMapDevToolModuleOptionsPlugin.js:50:27)
at C:\openserver\domains\test.js\node_modules\webpack\lib\SourceMapDevToolPlugin.js:160:53
at Hook.eval [as call] (eval at create (C:\OpenServer\domains\test.js\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:100:1)
at Hook.CALL_DELEGATE [as _call] (C:\OpenServer\domains\test.js\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\OpenServer\domains\test.js\node_modules\webpack\lib\Compiler.js:993:26)
at C:\OpenServer\domains\test.js\node_modules\webpack\lib\Compiler.js:1035:29
at Hook.eval [as callAsync] (eval at create (C:\OpenServer\domains\test.js\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\OpenServer\domains\test.js\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.compile (C:\OpenServer\domains\test.js\node_modules\webpack\lib\Compiler.js:1030:28)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! my-webpack-project@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the my-webpack-project@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Иван\AppData\Roaming\npm-cache\_logs\2021-02-18T20_43_45_589Z-debug.log
Process finished with exit code 2
Как видно, проблема в плагине SourceMapDevToolPlugin (если его отключить, ошибки не будет).
Но тогда непонятно, почему все работает в режиме production
?
Вот файл webpack.config.js
:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const context = path.resolve(__dirname);
module.exports = {
entry: {
main: [
'./js/index.js',
'./css/index.scss',
],
docx: './css/docx.scss'
},
output: {
publicPath: "/prod/",
path: context + "/prod",
filename: '[name].min.js',
chunkFilename: "chunks/chunk.[id].js",
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
extractComments: false,
})],
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
"@babel/preset-react",
],
plugins: ['@babel/plugin-proposal-class-properties']
},
},
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {sourceMap: true,},
},
'resolve-url-loader',
{
loader: 'sass-loader',
options: {sourceMap: true,},
},
],
},
{
test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/i,
use: ['url-loader'],
}
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].min.css',
chunkFilename: '[id].min.css',
}),
new CleanWebpackPlugin(),
new webpack.SourceMapDevToolPlugin({
filename: "maps/[file].map"
}),
new BrowserSyncPlugin({
proxy: 'http://test.js',
host: 'localhost',
port: 3000,
files: [context + '/**/*', './../**/*'],
notify: false,
reload: true,
}),
],
};
В документации https://webpack.js.org/plugins/source-map-dev-tool-plugin/#basic-use-case SourceMapDevToolPlugin
написано:
Tip If you want to use a custom configuration for this plugin in development mode, make sure to disable the default one. I.e. set devtool: false.
Пробовал, ставил devtool: false
, ничего...
Если кто знает в чем проблема, помогите, пожалуйста, разобраться!