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