0

Ковыряю сейчас 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, ничего...

Если кто знает в чем проблема, помогите, пожалуйста, разобраться!

1 ответ 1

1

Короче говоря, дело в кешировании.

Я работал в PhpStorm, удалил папку .idea и все заработало. Вот так.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.