无法使用节点设置 Webpack 样板答案

【问题标题】：Unable to setup Webpack Boilerplate using node无法使用节点设置 Webpack 样板
【发布时间】：2022-01-02 10:31:11
【问题描述】：

我正在尝试使用 node webpack 设置项目样板。我已经编写了设置它所需的所有代码，但不幸的是，我从 Webpack CLI 收到错误“无法加载 ./path/webpack.config.development.js' config”。

#Package.json 代码是

{
  "name": "floema",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p --progress --config webpack.config-build.js",
    "development": "webpack serve --progress --config webpack.config.development.js",
    "start": "npm run development"
  },
  "author": "Sanwal Manzoor",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^10.0.0",
    "mini-css-extract-plugin": "^2.4.5",
    "webpack": "^5.64.2",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0",
    "webpack-merge": "^5.8.0"
  }
}

#Webpack.config.build.js 代码为：

const path =require('path')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

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

module.exports = merge(config, {
  mode: 'production',

  output: {
    path: path.join(__dirname, 'public')
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
})

#Webpack.config.development.js 代码是

const { merge } = require('webpack-merge')
const path = require('path')

const config = require('./webpack.config.js')

module.exports = merge(config, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    writeToDisk: true
  },
  output: {
    path: path.resolve(__dirname, 'public')
  }
})

#Webpack.config.js 代码是

const path = require('path')
const webpack = require('webpack')


const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const IS_DEVELOPMENT = process.evn.NODE_ENV === 'dev'

const dirApp = path.join(__dirname, 'app')
const dirAssets = path.join(__dirname, 'assets')
const dirStyles = path.join(__dirname, 'styles')

console.log(dirApp, dirAssets, dirStyles)

我得到的错误是

[webpack-cli] Failed to load 'E:\N_Projects\FLOEMA\webpack.config.development.js' config
[webpack-cli] TypeError: Cannot read properties of undefined (reading 'NODE_ENV')
    at Object.<anonymous> (E:\N_Projects\FLOEMA\webpack.config.js:8:36)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (E:\N_Projects\FLOEMA\webpack.config.development.js:4:16)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

【问题讨论】：

process.env 不是'evn'

标签： node.js webpack webpack-dev-server

【解决方案1】：

好的。通过降级到一些早期版本的 webpack 包解决了这个问题。

解决方案是使用：

npm install --save-dev webpack@5.33.2 webpack-cli@4.9.0 webpack-dev-server@3.11.2 webpack-merge@5.7.3

我认为主要问题是由较新版本的 webpack-cli 引起的

【讨论】：