Webpack 4.0内部版本“ {required is not defined”错误

时间:2018-08-21 22:58:03

标签: webpack webpack-4 babel-loader

-已解决-我认为是通过重命名.babelrc使其不会被拾取... 仅包含在下面的配置规则中的babel的“ loader”和babel的“ preset”就足够了。我有从gulp构建中遗留下来的.babelrc ...当它被删除时,需求问题消失了...这个webpack很奇怪......

该错误发生在通过CLI上的“ heroku local”运行的localhost中,因此该应用程序是从./dist托管的。 2张照片显示了devtools中的错误照片。我不知道其中一个衬里含有:

module.exports = require("path");  

来自,但是代码扫描仅在script标签中加载的库中显示包含此类需求的js文件。 enter image description here enter image description here

没有成功,尝试在配置中进行许多排列以尝试删除有问题的'require'语句,但无济于事:

 externals: /^.*\.min\.js$/i,

    { test: [/app\/scripts\/encoderWorker\.min\.js/,
      /app\/scripts\/decoderWorker\.min\.js/],

        parser: {
          amd: false, // disable AMD
          commonjs: false, // disable CommonJS
          system: false, // disable SystemJS
          harmony: false, // disable ES2015 Harmony import/export
       requireInclude: false, // disable require.include
       requireEnsure: false, // disable require.ensure
       requireContext: false, // disable require.context
       browserify: false, // disable special handling of Browserify bundles
       requireJs: false, // disable requirejs.*
       node: false, // disable __dirname, __filename, module, require.extensions, require.main, etc.
     }

      }


    noParse:  /app\/scripts\/encoderWorker\.min\.js/,

  externals: [nodeExternals()],

我已经转储了清单文件,并从构建中查看了stdout,但是唯一值得注意的是stdout始终包括:

 42 B     path             external "path"                                                  built

这将导致错误。为什么会生成?似乎是越野车...

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const {GenerateSW} = require('workbox-webpack-plugin');
var ManifestPlugin = require('webpack-manifest-plugin');
//const APP_DIR = path.resolve(__dirname, "./app/scripts/");
//let nodeEnv = 'development';
// use task dependency 'config' with this to set environment
module.exports = {
  mode: "development",
  devtool: 'source-map',
  entry: {  main: "./app/scripts/main.js",
            voice: "./app/scripts/voice.js"

    },
  target: 'node',

  output: {
    path: path.resolve(__dirname, "dist"), // string
    filename: '[name].bundle.js'
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)
    //filename: "bundlets.js", // string    // the filename template for entry chunks
  },

  module: {

    rules: [
      { test: /\.js$/,
        //include: path.resolve(__dirname, "app/scripts/voice.js"),
        exclude: path.resolve(__dirname, "node_modules"),
        use: {
          loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
        }
      },
      {test: /\.html$/,
        exclude: [path.resolve(__dirname, 'app', "create.html"),
          path.resolve(__dirname, 'app', 'var', "voice.html"),
          path.resolve(__dirname, 'app', "basic.html"),
        ],
        //include: path.resolve(__dirname, 'app', 'var', "voice.html"),
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]},

      { test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {  test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              disable: true, // webpack@2.x and newer
            },
          },
        ],
      },
    ]
  },
  plugins: [
    new ManifestPlugin(),
  new CopyWebpackPlugin([
          { from: 'app/scripts', to: 'scripts'},
          { from: 'app/views', to: 'views' },
          { from: 'app/var', to: 'var'},
          { from: 'app/images', to: 'images' },
          { from: 'app/styles', to: 'styles' },
          { from: 'app/images/touch/apple-touch-icon.png' , to: './' },
          { from: 'server.js' , to: './'}
  ]),

  new MiniCssExtractPlugin({
  filename: "[name].css",
  chunkFilename: "[id].css"
  }),
  new GenerateSW({
    chunks: ['main', 'voice'],
    include: [/\.js$/],
    importsDirectory: 'wb-assets'
   })
  ],
  stats: {
    errors: false,
    errorDetails: false,
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
}
}

package json

"dependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "@google-cloud/speech": "^1.5.0",
    "apache-server-configs": "^2.14.0",
    "babel-loader": "^8.0.0-beta.4",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^8.0.0",
    "body-parser": "^1.18.3",
    "ejs": "^2.5.7",
    "ejs-loader": "^0.3.1",

    "express": "^4.16.3",
    "firebase": "^4.13.1",
    "firebaseui": "^2.7.0",
    "fs": "0.0.1-security",

    "mime-types": "^2.1.19",
    "path": "^0.12.7",

    "serve-static": "^1.13.2",
    "storage-available": "^1.0.0",
    "webpack": "^4.16.5",
    "webpack-node-externals": "^1.7.2",

    "workbox-webpack-plugin": "^3.4.1"
  },

  "devDependencies": {
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.7.0",
    "babelify": "^8.0.0",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^4.3.1",
    "mini-css-extract-plugin": "^0.4.1",
    "webpack-command": "^0.4.1",
    "webpack-manifest-plugin": "^2.0.3",
    "workbox-build": "^3.2.0",
    "workbox-sw": "^3.2.0"

0 个答案:

没有答案