如何在 Webpack 中缩小文件？答案

【问题标题】：How To Minify a File In Webpack?如何在 Webpack 中缩小文件？
【发布时间】：2020-05-05 00:28:53
【问题描述】：

我不敢相信我必须问这个问题，但我们开始吧。

如何使用 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){}]);

【问题讨论】：

将模式设置为production。见Configuration: mode
@Jesper 已经投入生产（禁用 minify 以进行测试）；) 完全没有任何作用。反正所有模式都试过了。
啊哈，但您希望代码以特定方式缩小，而不是正常方式，阅读问题的最后部分。不知道这样的事情是否可行。

标签： javascript webpack-4

【解决方案1】：

这是因为 webpack 是一个模块打包器，而不仅仅是一个 JS 压缩器。出于这个原因，它添加了很多代码来加载模块（你称之为垃圾的部分:)）。

webpack 的强大之处在于将你所有的资产捆绑到 JS 中。想象一下，你用 JS、HTML 和 CSS 定义了一个小部件。如果没有捆绑器，您必须记住在需要使用它们时通过javascript 或style 标签包含所有这些文件。当你的代码变大时，它变得难以管理。使用 webpack，您只需要导入一个文件，一切都为您完成。

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

my-style.css

my-class{
  color:red
}

my-widget.js

import 'my-style.css'
$(document).ready(function () {
    $(body).append('<p class="my-class">Webpack rules!</p>');
});

my-page.html

<html>
  <head>
    <script src="my-widget.js">
  </head>
  <body>
  </body>
</html>

当你用 webpack 包加载my-page.html 时，添加的段落会有一个红色的文本，因为它也加载了样式模块，不需要手动添加样式文件。这对于任何大型代码库都非常方便，因为您只需决定使用一个模块而不用担心任何依赖关系。在开发便利性和代码大小之间需要权衡取舍。

您可以查看https://github.com/ronami/minipack 以了解捆绑程序的内部工作原理。来自 cmets：

模块捆绑器将小段代码编译成更大更复杂的代码，可以在网络浏览器中运行。

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

【讨论】：