如何在 Webpack 中缩小文件？

Question

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

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

Answer 1

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

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

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

我的-style.css

my-class{
  color:red
}

我的-widget.js

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

我的-page.html

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

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

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

Module bundlers compile small pieces of code into something larger and more complex that can run in a web browser.

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

如何在 Webpack 中缩小文件？

How To Minify a File In Webpack?

javascript

webpack-4