webpack - Webpack 已使用与 API 架构不匹配的配置对象进行初始化

Question

在我将 webpack 更新到最新版本后，我开始在编译阶段收到以下错误：

✖ ｢wds｣：无效的配置对象。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。- configuration.devtool 应该匹配模式“^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”。自 webpack 5 以来的重大变化：devtool 选项更加严格。请严格按照模式中关键字的顺序。npm 错误！代码 ELIFECYCLE npm 错误！errno 1 npm 错误！webpack-basic-setting@3.0.0 开发人员：webpack-dev-server --open --config config/webpack.dev.conf.js npm 错误！退出状态 1 npm ERR！npm 错误！在 webpack-basic-setting@3.0.0 开发脚本中失败。npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-07-28T09_00_27_811Z-debug.log`enter code here`

调试日志文件：

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using npm@6.14.4
3 info using node@v10.20.1
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle webpack-basic-setting@3.0.0~predev: webpack-basic-setting@3.0.0
6 info lifecycle webpack-basic-setting@3.0.0~dev: webpack-basic-setting@3.0.0
7 verbose lifecycle webpack-basic-setting@3.0.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle webpack-basic-setting@3.0.0~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/root/webpack-basic-setting/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
9 verbose lifecycle webpack-basic-setting@3.0.0~dev: CWD: /root/webpack-basic-setting
10 silly lifecycle webpack-basic-setting@3.0.0~dev: Args: [ '-c',
10 silly lifecycle   'webpack-dev-server --open --config config/webpack.dev.conf.js' ]
11 silly lifecycle webpack-basic-setting@3.0.0~dev: Returned: code: 1  signal: null
12 info lifecycle webpack-basic-setting@3.0.0~dev: Failed to exec dev script
13 verbose stack Error: webpack-basic-setting@3.0.0 dev: `webpack-dev-server --open --config config/webpack.dev.conf.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid webpack-basic-setting@3.0.0
15 verbose cwd /root/webpack-basic-setting
16 verbose Linux 5.6.0-kali2-amd64
17 verbose argv "/usr/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v10.20.1
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 1
22 error webpack-basic-setting@3.0.0 dev: `webpack-dev-server --open --config config/webpack.dev.conf.js`
22 error Exit status 1
23 error Failed at the webpack-basic-setting@3.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

webpack.base.conf.js：

/* Base config: */
const path = require('path');
const fs = require("fs");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const PATHS = {
    src: path.join(__dirname, '../src'),
    dist: path.join(__dirname, '../build'),
    assets: 'static/',
    root: './'
}

const PAGES_DIR = `${PATHS.src}/pug/pages/`;
const PAGES = fs
    .readdirSync(PAGES_DIR)
    .filter(fileName => fileName.endsWith('.pug'));

module.exports = {
    externals: {
        paths: PATHS
    },
    entry: {
        app: PATHS.src,
        // module: `${PATHS.src}/your-module.js`,
    },
    output: {
        filename: `${PATHS.assets}js/[name].[contenthash].js`,
        path: PATHS.dist,
        publicPath: '/'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: "vendors",
                    test: /node_modules/,
                    chunks: "all",
                    enforce: true
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/'
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader',
                options: {
                    pretty: true
                }
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            },
            {
                test: /\.(woff2?|ttf|eot|svg|)(\?v=\d+\.\d+)?$/,
                loader: "file-loader",
                options: {
                    name: "[name].[ext]"
                }
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: `./config/postcss.config.js`
                            } 
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true }
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: `./config/postcss.config.js`
                            }
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            '~': 'src'
        }
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: `${PATHS.assets}css/[name].[hash].css`,
        }),
        /*
        If using html
        new HtmlWebpackPlugin({
            template: `${PATHS.root}index.html`,
            filename: './index.html',
            inject: true
        }),*/
        new CopyWebpackPlugin([
            { patterns: [{ from: `${PATHS.src}/assets/img`, to: `${PATHS.assets}img` }] },
            { patterns: [{ from: `${PATHS.src}/assets/fonts`, to: `${PATHS.assets}fonts` }] }
        ]),
        ...PAGES.map(page => new HtmlWebpackPlugin({
            template: `${PAGES_DIR}/${page}`,
            filename: `./${page.replace(/\.pug/,'.html')}`
        }))
    ],
}

webpack.dev.conf.js：

const webpack = require('webpack');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const devWebpackConfig = merge(baseWebpackConfig, {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: baseWebpackConfig.externals.paths.dist,
        port: 80,
        overlay: {
            warnings: true,
            errors: true
        }
    },
    plugins: [
        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map'
        })
    ]
});

module.exports = new Promise((resolve) => {
    resolve(devWebpackConfig)
});

标签： webpack