Javascript 网页包在生成时解析节点\ U模块的错误文件路径

我真的很难对付这个。我渴望进入webpack并从头开始进行设置，除了填充index.html文件的部分之外，我的大部分构建都是构建的。Webpack正在抛出这样的错误

ERROR in   Error: undefined:1
  undefine__webpack_require__i/*! !../node_modules/lodash/lodash.js

我在css加载程序中也遇到了类似的错误

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
SyntaxError: Unexpected identifier
    at Object../node_modules/css-loader/dist/cjs.js

此错误的奇怪之处在于路径的开始处，该路径应为Web包生成位置的./node\u modules，但由于某些原因，它假定其为../node\u modules

如果有人可以冒险猜测为什么会发生这种情况，那么完整的错误如下

ERROR in   Error: undefined:1
  undefine__webpack_require__i/*! !../node_modules/lodash/lodash.js */ "./node_modules/lodash/lodash.js"defined undefined=undefined undefinedrundefinedeundefinedqundefineduundefinediundefinedrundefinedeundef
  ined(undefined"undefined!undefined!undefined.undefined.undefined/undefinednundefinedoundefineddundefinedeundefined_undefinedmundefinedoundefineddundefineduundefinedlundefinedeundefinedsundefined/undefinedl
  undefinedoundefineddundefinedaundefinedsundefinedhundefined/undefinedlundefinedoundefineddundefinedaundefinedsundefinedhundefined.undefinedjundefinedsundefined"undefined)undefined;undefinedmundefinedoundef
  ineddundefineduundefinedlundefinedeundefined.undefinedeundefinedxundefinedpundefinedoundefinedrundefinedtundefinedsundefined undefined=undefined undefinedfundefineduundefinednundefinedcundefinedtundefinedi
  undefinedoundefinednundefined undefined(undefinedtundefinedeundefinedmundefinedpundefinedlundefinedaundefinedtundefinedeundefinedPundefinedaundefinedrundefinedaundefinedmundefinedsundefined)
  SyntaxError: Unexpected string

  - template.html:97 Object../node_modules/html-webpack-plugin/lib/loader.js!./src/template.html
    C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:97:1

  - template.html:21 __webpack_require__
    C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:21:30

  - template.html:85
    C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:85:18

  - template.html:88
    C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:88:10

  - index.js:247 HtmlWebpackPlugin.evaluateCompilationResult
    [experimental_cloud_storage]/[html-webpack-plugin]/index.js:247:28

  - index.js:161
    [experimental_cloud_storage]/[html-webpack-plugin]/index.js:161:23

网页包配置看起来是这样的

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: ['babel-polyfill', './src/index.jsx'],
  target: 'web',
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx'],
  },
  output: {
    path: path.resolve(__dirname, 'wwwroot'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
        },
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader',
      },
      {
        test: /\.json$/,
        use: ['json-loader'],
        type: 'javascript/auto',
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              fallback: 'file-loader',
              name: '[name].[ext]',
              outputPath: 'assets/',
              publicPath: '/assets/',
            },
          },
        ],
      },
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'fast-sass-loader',
            options: {
              sourceMap: true,
              data: '@import "app.scss";',
              includePaths: [path.resolve(__dirname, 'src/styles/sass')],
            },
          },
        ],
      },
    ],
  },
  devtool: 'cheap-module-eval-source-map',
  plugins: [
    new StyleLintPlugin({
      syntax: 'scss',
    }),
    new MiniCssExtractPlugin({
      filename: 'style.bundle.css',
    }),
    new HtmlWebpackPlugin({
      template: './src/template.html',
      filename: './index.html',
      favicon: './src/assets/img/favicon.png',
    }),
  ],
};

我的babel配置看起来像这样

module.exports = {
  presets: [
    [
      '@babel/preset-env', {
        targets: { esmodules: true },
      },
    ],
    '@babel/preset-react',
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-proposal-object-rest-spread',
    ['inline-react-svg', {
      svgo: {
        plugins: [
          {
            removeTitle: true,
          },
          {
            removeAttrs: { attrs: '(data-name)' },
          },
        ],
      },
    }],
  ],
};

{
  "name": "experimental_cloud_storage",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.4.1",
    "firebase": "^7.8.2",
    "node-sass": "^4.13.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "sweetalert": "^2.1.2",
    "sweetalert2": "^9.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch": "webpack --config webpack.dev.js --watch"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "autoprefixer": "^8.4.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-inline-react-svg": "^1.1.0",
    "babel-plugin-lodash": "^3.3.4",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^3.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint": "^6.5.1",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.16.0",
    "fast-sass-loader": "^1.5.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^23.0.0",
    "jest-cli": "^23.0.0",
    "jest-html-reporter": "^2.5.0",
    "jest-localstorage-mock": "^2.4.0",
    "jest-teamcity-reporter": "^0.9.0",
    "json-loader": "^0.5.7",
    "mini-css-extract-plugin": "^0.4.5",
    "mock-socket": "^8.0.5",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-loader": "^2.1.4",
    "precss": "^4.0.0",
    "react-inlinesvg": "^1.1.7",
    "react-svg-loader": "^3.0.3",
    "redux-mock-store": "^1.5.4",
    "resolve-url-loader": "^3.1.0",
    "speed-measure-webpack-plugin": "^1.3.1",
    "style-loader": "^0.21.0",
    "stylelint": "^9.10.1",
    "stylelint-config-airbnb": "0.0.0",
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-order": "^0.8.1",
    "stylelint-scss": "^3.5.4",
    "stylelint-webpack-plugin": "^0.10.4",
    "svg-inline-loader": "^0.8.0",
    "terser-webpack-plugin": "^2.1.3",
    "url-loader": "^2.2.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-merge": "^4.2.2",
    "webpack-plugin-replace": "^1.2.0"
  }
}

package.json如下所示

module.exports = {
  presets: [
    [
      '@babel/preset-env', {
        targets: { esmodules: true },
      },
    ],
    '@babel/preset-react',
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-proposal-object-rest-spread',
    ['inline-react-svg', {
      svgo: {
        plugins: [
          {
            removeTitle: true,
          },
          {
            removeAttrs: { attrs: '(data-name)' },
          },
        ],
      },
    }],
  ],
};

{
  "name": "experimental_cloud_storage",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.4.1",
    "firebase": "^7.8.2",
    "node-sass": "^4.13.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "sweetalert": "^2.1.2",
    "sweetalert2": "^9.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch": "webpack --config webpack.dev.js --watch"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "autoprefixer": "^8.4.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-inline-react-svg": "^1.1.0",
    "babel-plugin-lodash": "^3.3.4",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^3.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint": "^6.5.1",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.16.0",
    "fast-sass-loader": "^1.5.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^23.0.0",
    "jest-cli": "^23.0.0",
    "jest-html-reporter": "^2.5.0",
    "jest-localstorage-mock": "^2.4.0",
    "jest-teamcity-reporter": "^0.9.0",
    "json-loader": "^0.5.7",
    "mini-css-extract-plugin": "^0.4.5",
    "mock-socket": "^8.0.5",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-loader": "^2.1.4",
    "precss": "^4.0.0",
    "react-inlinesvg": "^1.1.7",
    "react-svg-loader": "^3.0.3",
    "redux-mock-store": "^1.5.4",
    "resolve-url-loader": "^3.1.0",
    "speed-measure-webpack-plugin": "^1.3.1",
    "style-loader": "^0.21.0",
    "stylelint": "^9.10.1",
    "stylelint-config-airbnb": "0.0.0",
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-order": "^0.8.1",
    "stylelint-scss": "^3.5.4",
    "stylelint-webpack-plugin": "^0.10.4",
    "svg-inline-loader": "^0.8.0",
    "terser-webpack-plugin": "^2.1.3",
    "url-loader": "^2.2.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-merge": "^4.2.2",
    "webpack-plugin-replace": "^1.2.0"
  }
}

提前欢呼，因为这一次让我陷入了一个多小时的困境，似乎什么也做不到，将模块文件夹（包括配置解析部分的模块：['node_modules'））别名为各种不同的东西

---

环顾四周，我认为这与HtmlWebpackPlugin有关，但在这一点上我可能完全错了，所以经过数小时的调试，我终于找到了问题的原因

当脚本通过npm启动时，它会调用webpack.dev.js，这会将公共设置与dev设置合并。我从中删除了所有值

plugins: [
    new ReplacePlugin({
      exclude: [
        /node_modules/,
        /obj/,
        /Properties/,
        /react/,
        /redux/,
        /\.js$/,
      ],
      values: {}, <--- here leaving im assuming lodash to freak out as it was trying to merge nothing.
    }),
  ],

插件：[
新的替换插件({
排除：[
/节点\模块/，
/obj/，
/属性/，
/反应/，
/redux/，
/\.js$/，
],
值：{}，