时间戳

首页 > 解决方案 > 如何在 Webpack 中缩小文件？

javascript - 如何在 Webpack 中缩小文件？

问题描述

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

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

标签： javascriptwebpack-4

解决方案

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

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

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

我的风格.css

my-class{
  color:red
}

我的widget.js

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

我的页面.html

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

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

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

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

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

推荐阅读