NODE_ENV =生产错误“ ELIFECYCLE ERR！errno 2”-香草JS Webpack（npm运行版本）

Question

Vanilla JS-Webpack

npm run dev可以正常运行，但是当我运行npm run build时，出现错误“ ELIFECYCLE errno 2” > 在agora.io上查看下面的代码

我尝试了一些更改，但没有成功！

package.json文件：

{
  "name": "agora-video-call",
  "description": "Agora Video Call in VanillaJs",
  "version": "2.6.1",
  "repository": {
    "type": "git",
    "url": "https://github.com/AgoraIO/Basic-Video-Call/tree/master/Group-Video/OpenVideoCall-Web"
  },
  "license": "MIT",
  "scripts": {
    "test": "jest ./test",
    "lint": "eslint src/**/*.{js,jsx} --fix",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open",
    "start": "npm run dev",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "precommit": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{css,scss,json,md,js,jsx}": [
      "prettier --write",
      "git add"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "dependencies": {
    "agora-rtc-sdk": "^2.6.1",
    "bulma": "^0.6.1",
    "bulma-checkradio": "^0.1.11",
    "bulma-switch": "^0.1.12",
    "jquery": "^3.2.1",
    "js-cookie": "^2.2.0",
    "script-loader": "^0.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "autoprefixer": "^9.5.0",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^2.0.1",
    "copy-webpack-plugin": "^4.6.0",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.1",
    "cssnano": "^4.1.10",
    "eslint": "^5.15.1",
    "eslint-config-prettier": "^4.1.0",
    "eslint-config-xo": "^0.20.1",
    "eslint-plugin-prettier": "^3.0.1",
    "file-loader": "^1.1.11",
    "gulp": "^4.0.1",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^1.3.1",
    "jest": "^24.5.0",
    "lint-staged": "^7.2.0",
    "mini-css-extract-plugin": "^0.4.5",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "prettier": "^1.16.4",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.19.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1",
    "webpack-serve": "^3.0.0-beta.3"
  }
}

webpack.config.js文件：

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const pkg = require('./package.json');

const utils = require('./webpack.utils');

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: utils.getEntry(),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'assets/js/[name].[hash:7].js'
  },
  module: {
    rules: utils.styleLoaders().concat([
      {
        test: /\.html$/,
        use: [
          {
            loader: require.resolve('html-loader'),
            options: {
              minimize: true,
            }
          }
        ]
      },
      {
        test: /\.(js|jsx|mjs)$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              cacheDirectory: true
            }
          }
        ]
      },
      {
        test: [/\.(bmp|gif|jpe?g|png|svg)(\?.*)?$/],
        use: [
          {
            loader: require.resolve('url-loader'),
            options: {
              limit: 8000,
              name: 'assets/img/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: [
          {
            loader: require.resolve('url-loader'),
            options: {
              limit: 8000,
              name: 'assets/media/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: require.resolve('url-loader'),
            options: {
              limit: 8000,
              name: 'assets/fonts/[name].[hash:7].[ext]'
            }
          }
        ]
      }
    ])
  },
  resolve: {
    alias: {
      '@': path.join(__dirname, './src'),
      // 'jquery': 'jquery/dist/jquery.slim.js'
    },
    extensions: ['*', '.js', '.json']
  },
  plugins: utils.getHtml().concat([
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, './static'),
        to: 'assets/',
        ignore: ['.*']
      }
    ]),
    new webpack.DefinePlugin({
      agoraVersion: JSON.stringify(pkg.dependencies['agora-rtc-sdk'])
    })
    // new BundleAnalyzerPlugin()
  ])
};

if (process.env.NODE_ENV === 'production') {
  module.exports.output.publicPath = './';
  module.exports.optimization = {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          chunks: 'all',
          name: 'vendor'
        }
      }
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // Set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  };
  module.exports.plugins = (module.exports.plugins || []).concat([
    new CleanWebpackPlugin(),
    // Extract css into its own file
    new MiniCssExtractPlugin({
      filename: 'assets/css/[name].css'
    }),
    new webpack.BannerPlugin({
      banner: `console.log("Last modification time: ${new Date().toLocaleString()}");`,
      raw: true,
      entryOnly: true,
      test: /\.(js|jsx|mjs)$/
    })
  ]);
}

webpack.utils.js文件：

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

exports.cssLoaders = function() {
  const styleLoader = {
    loader: 'style-loader'
  };
  const cssLoader = {
    loader: 'css-loader'
  };
  const postcssLoader = {
    loader: 'postcss-loader'
  };
  const extractLoader = {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../../'
    }
  }
  // Generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    const loaders = [cssLoader, postcssLoader];

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: loaderOptions
      });
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    return [
      process.env.NODE_ENV === 'production' ? extractLoader : styleLoader,
      ...loaders
    ];
  }

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    sass: generateLoaders('sass', {
      indentedSyntax: true
    }),
    scss: generateLoaders('sass')
  };
};

// Generate loaders
exports.styleLoaders = function() {
  const output = [];
  const loaders = exports.cssLoaders();

  for (const extension in loaders) {
    if (extension) {
      const loader = loaders[extension];
      output.push({
        test: new RegExp('\\.' + extension + '$'),
        use: loader
      });
    }
  }
  return output;
};

exports.getPublicPath = function() {
  let urlString = require('./package.json').homepage;
  let pathname = url.parse(urlString).pathname;
  if (!pathname) {
    return '/';
  }

  return /\/$/.test(pathname) ? pathname : pathname + '/';
};

exports.getEntry = function() {
  const ROUTES_PATH = path.resolve(__dirname, './src/pages');
  const routesArray = fs.readdirSync(ROUTES_PATH);
  let result = {};
  for (let item of routesArray) {
    result[item] = `@/pages/${item}/${item}.js`;
  }
  return result;
};

exports.getHtml = function() {
  return Object.keys(exports.getEntry()).map(
    key =>
      new HtmlWebpackPlugin({
        filename: `${key}.html`,
        template: `src/pages/${key}/${key}.html`,
        inject: true,
        chunks: ['vendor', key],
      })
  );
};

这是我的结果：

  

agora-video-call@2.6.1 build / Users / rodrigomartinson / Desktop / WebTable   跨环境NODE_ENV = production webpack --progress --hide-modules --config webpack.config.js

Version: webpack 4.30.0
Time: 8383ms
Built at: 05/20/2019 6:14:31 PM
 13 assets
Entrypoint index = assets/css/vendor.css assets/js/vendor.ced783a.js assets/css/index.css assets/js/index.ced783a.js
Entrypoint meeting = assets/css/vendor.css assets/js/vendor.ced783a.js assets/css/meeting.css assets/js/meeting.ced783a.js
Entrypoint precall = assets/css/vendor.css assets/js/vendor.ced783a.js assets/css/precall.css assets/js/precall.ced783a.js

ERROR in assets/js/vendor.ced783a.js from UglifyJs
Unexpected token: keyword «const» [./node_modules/agora-rtc-sdk/AgoraRTCSDK.min.js:2,15617][assets/js/vendor.ced783a.js:10789,15460]
Child html-webpack-plugin for "index.html":
     2 assets
    Entrypoint undefined = index.html
Child html-webpack-plugin for "meeting.html":
     2 assets
    Entrypoint undefined = meeting.html
Child html-webpack-plugin for "precall.html":
     2 assets
    Entrypoint undefined = precall.html
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/lib/index.js!node_modules/bulma-checkradio/dist/bulma-checkradio.min.css:
    Entrypoint mini-css-extract-plugin = *
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/lib/index.js!node_modules/bulma-switch/dist/bulma-switch.min.css:
    Entrypoint mini-css-extract-plugin = *
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js!src/assets/global.scss:
    Entrypoint mini-css-extract-plugin = *
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js!src/pages/index/index.scss:
    Entrypoint mini-css-extract-plugin = *
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js!src/pages/meeting/meeting.scss:
    Entrypoint mini-css-extract-plugin = *
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js!src/pages/precall/precall.scss:
    Entrypoint mini-css-extract-plugin = *
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js??ref--6-3!node_modules/bulma/bulma.sass:
    Entrypoint mini-css-extract-plugin = *
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/lib/index.js!src/assets/css/icons.css:
    Entrypoint mini-css-extract-plugin = *
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/lib/index.js!src/utils/Render/render.css:
    Entrypoint mini-css-extract-plugin = *
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! agora-video-call@2.6.1 build: `cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the agora-video-call@2.6.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above. ```

Please let me know any thoughts