Javascript 如何缩小网页中的文件？

我不敢相信我会问这个问题，但我们开始吧

如何使用Webpack 4缩小文件

似乎默认值喜欢添加所有这些垃圾

/******/ (function(modules) { // webpackBootstrap
/******/        // The module cache
/******/        var installedModules = {};
/******/
/******/        // The require function
/******/        function __webpack_require__(moduleId) {
/******/
/******/                // Check if module is in cache
/******/                if(installedModules[moduleId]) {
/******/                        return installedModules[moduleId].exports;
/******/                }
/******/                // Create a new module (and put it into the cache)
/******/                var module = installedModules[moduleId] = {
/******/                        i: moduleId,
/******/                        l: false,
/******/                        exports: {}
/******/                };

...

我只需要输入一个文件，输出一个缩小的文件。绝对没有额外的垃圾添加

让我发疯的是，我在webpack.config.js中尝试了大约10000个不同的搜索选项

不知道该怎么关掉那玩意儿

有人能给我指出我所缺少的那个微小的、模糊的、隐藏的配置选项吗

非常感谢。谢谢

例如：

function webpack_4() {
    return 'sucks';
}

应缩小到：

function webpack_4(){return 'sucks'})

而不是：

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

---

这是因为webpack是一个模块绑定器，而不仅仅是一个JS迷你程序。出于这个原因，它添加了大量代码，以便能够加载模块（您称之为垃圾的部分：）

webpack的功能是将所有资产捆绑到JS中。假设您使用JS、HTML和CSS定义了一个小部件。如果没有bundler，您将不得不记住在需要使用时通过

javascript

或

style

标记包含所有这些文件。当代码变大时，它将变得不可管理。有了webpack，您只需导入一个文件，一切都会为您完成

例如，您可以在CSS文件中定义样式，然后将其导入JS文件：

我的风格.css

我的班级{
颜色：红色
}

my widget.js

导入'my style.css'
$（文档）.ready（函数（）{
$（body.append（“
网页包规则！
”）；
});

my page.html

当您使用webpack bundle加载

my page.html

时，添加的段落将有一个红色文本，因为它也加载了样式模块，而无需手动添加样式文件。这对于任何大型代码库都非常方便，因为您只需决定使用模块，而不必担心任何依赖性。在开发方便性和代码大小之间有一个权衡

您可以查看捆绑机的内部工作原理。从评论中：

模块绑定器将小块代码编译成可以在web浏览器中运行的更大、更复杂的代码

---

---

回答您的问题：如果您只需要缩小JS文件，那么webpack可能不是适合您的工具

将模式设置为生产模式。请参阅@Jesper已投入生产（禁用minify进行测试）；）什么都不做。我已经尝试过所有的模式。啊哈，但是你希望代码以一种特定的方式缩小，而不是以普通的方式，阅读问题的最后一部分。我不知道这样的事情是否可能发生。