Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/466.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript main.js文件是如何创建的?_Javascript_Node.js_Webpack Dev Server - Fatal编程技术网

Javascript main.js文件是如何创建的?

Javascript main.js文件是如何创建的?,javascript,node.js,webpack-dev-server,Javascript,Node.js,Webpack Dev Server,我正在尝试对一个现有的代码库进行反向工程,我从以前的承包商那里接管了这个代码库,我很难弄清楚一个特定的文件main.js是如何创建的,这样我就可以修改它了 代码库是一组javascript文件,主目录中还有一个基于webpack dev服务器的文件 我已经尝试使用WebpackDevServer使用--watch标志编译代码。但是,输出的main.js文件冗长且格式良好,而当前生成的main.js文件被缩小并压缩。我需要以完全相同的方式生成main.js文件 这是webpack dev服务器文件

我正在尝试对一个现有的代码库进行反向工程,我从以前的承包商那里接管了这个代码库,我很难弄清楚一个特定的文件main.js是如何创建的,这样我就可以修改它了

代码库是一组javascript文件,主目录中还有一个基于webpack dev服务器的文件

我已经尝试使用WebpackDevServer使用--watch标志编译代码。但是,输出的main.js文件冗长且格式良好,而当前生成的main.js文件被缩小并压缩。我需要以完全相同的方式生成main.js文件

这是webpack dev服务器文件


const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');

module.exports = {
  output: {
    path: `${__dirname}./../backend/templates`,
    filename: 'main.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'static/index.html',
      alwaysWriteToDisk: true,
    }),
    new HtmlWebpackHarddiskPlugin(),

    new webpack.EnvironmentPlugin({
      API_HOST: null,
      NODE_ENV: 'development',
      DEBUG: false,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-proposal-class-properties'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'react-svg-loader',
          },
        ],
      },
    ],
  },
};

这是应生成的main.js文件的一个片段:

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=234)}([function(e,t,n){e.exports=n(143)()},function(e,t,n){"use strict";e.exports=n(115)},function(e,t,n){var r=n(46),a=n(130),o=n(131),i=n(15),u=n(36),c=n(16),l=Object.prototype.hasOwnProperty,s=o(function(e,t){if(u(t)||i(t))a(t,c(t),e);else for(var n in t)l.call(t,n)&&r(e,n,t[n])});e.exports=s},function(e,t,n){var 


它有以下评论:

/*
object-assign
(c) Sindre Sorhus
@license MIT
/** @license React v16.5.2
 * react.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
 /** @license React v16.5.2
 * react-dom.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
/
/** @license React v16.5.2
 * schedule.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
 /** @license React v16.5.2
 * react-is.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
这是一个代码段main.js文件,由webpack dev server生成:

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = (function(x) {\n  return x === null ? NaN : +x;\n});\n\n\n//# sourceURL=webpack:///./node_modules/d3-array/src/number.js?");


如您所见,webpack dev服务器版本更为详细。real main.js文件中还有一些注释,它们引用react.production.min.js和其他类似文件。我认为min指的是缩小。但是,我无法确定使用哪些软件包或产品以完全相同的方式实际创建文件。

可能有多个网页包配置。是否可以验证是否有任何其他配置正在用于生产?是的,您可能需要将config的标志传递给webpack生成过程以获得所需的内容。可能有多个webpack配置。您能否验证是否有任何其他配置正在用于生产?是的,您可能需要将config的标志传递给webpack构建过程以获得您想要的内容。