wepack5 的 DEV 和 PROD 的单独配置不起作用

Question

我删除了 webpack.config.js 以创建 3 个不同的 webpack 配置文件，即 webpack.common.js、webpack.prod.js、webpack.dev.js。使用 webpack.config.js 时，项目在 npm run start 之后运行正常。但是将配置分离到 3 个不同的文件后，构建失败并出现此错误

$ npm run start

> resume@1.0.0 start C:\Users\Ankit Rawat\projects\resume
> webpack serve --open --config webpack.dev.js

[webpack-cli] The specified config file doesn't exist in 'C:\Users\Ankit Rawat\projects\resume\webpack.dev.js'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! resume@1.0.0 start: `webpack serve --open --config webpack.dev.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the resume@1.0.0 start 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\Ankit Rawat\AppData\Roaming\npm-cache\_logs21-01-14T06_54_14_483Z-debug.log

npm 运行 build 也失败并出现同样的错误。

webpack.common.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        app: './src/index.js',
    },
    module: {
        rules: [
            // JavaScript
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            // Images
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
        ],
    },
    plugins: [
        // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'HEY !!',
            template: path.resolve(__dirname, './index.html'),
            filename: 'index.html', // output file
        }),
        new webpack.ProvidePlugin({ // no need to import React and ReactDOM  in every component created, after using this
            'React': 'react',
            'ReactDOM': 'react-dom',
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules: [
            // CSS and Sass
            {
                test: /\.(scss|css)$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            }
        ],
    },
});

webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
        ],
    },
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },
});

package.json

{
  "name": "resume",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-react": "^7.12.10",
    "css-minimizer-webpack-plugin": "^1.2.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^1.3.3",
    "node-sass": "^5.0.0",
    "react-hot-loader": "^4.13.0",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.12.2",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1",
    "webpack-merge": "^5.7.3"
  }
}

这是我的webpack.config.js，现在已删除

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { web } = require('webpack')

module.exports = {
    mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
    },
    // entry: {
    //     main: path.resolve(__dirname, './src/index.js'),
    // },
    // output: {
    //     path: path.resolve(__dirname, './dist'),
    //     filename: '[name].bundle.js',
    // },
    module: {
        rules: [
            // JavaScript
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            // CSS and Sass
            {
                test: /\.(scss|css)$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            // Images
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'HEY !!',
            template: path.resolve(__dirname, './index.html'),
            filename: 'index.html', // output file
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),       // ONLY FOR DEVELOPMENT
        new webpack.ProvidePlugin({                     // no need to import React and ReactDOM  in every component created, after using this
            'React': 'react',
            'ReactDOM': 'react-dom',
        })
    ],
}

我无法解决这里的问题。请帮助。

Answer 1

正如@tmhao2005 所指出的，webpack 文件没有放在正确的位置。更正了那个错误就消失了，只是被

取代了

[webpack-cli] Failed to load 'C:\Users\Ankit Rawat\projects\resume\webpack.dev.js'
[webpack-cli] ReferenceError: webpack is not defined
    at Object.<anonymous> (C:\Users\Ankit Rawat\projects\resume\webpack.dev.js:17:13)
    at Module._compile (C:\Users\Ankit Rawat\projects\resume\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (C:\Users\Ankit Rawat\projects\resume\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at loadConfig (C:\Users\Ankit Rawat\projects\resume\node_modules\webpack-cli\lib\webpack-cli.js:753:31)
    at Promise.all.options.config.map (C:\Users\Ankit Rawat\projects\resume\node_modules\webpack-cli\lib\webpack-cli.js:823:48)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! resume@1.0.0 start: `webpack serve --open --config webpack.dev.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the resume@1.0.0 start 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\Ankit Rawat\AppData\Roaming\npm-cache\_logs21-01-14T08_03_02_168Z-debug.log

这已通过在所需页面中添加 const webpack = require('webpack'); 解决。

wepack5 的 DEV 和 PROD 的单独配置不起作用

Separate config for DEV and PROD of wepack5 not working

reactjs

webpack

webpack-5