Webpack - 增加 JS 库的大小答案

【问题标题】：Webpack - increases the size of a JS libraryWebpack - 增加 JS 库的大小
【发布时间】：2017-02-04 04:51:07
【问题描述】：

在我的新项目中使用 weback，这是一个用 ECMA 6 标准编写的纯 JS 库，不依赖于任何外部（节点）包，似乎最大化了我的 o/p library.js 文件的大小，这超出了目的使用相同的。

问题

我的 o/p library.js 大小相同，我的源文件 = src 文件 = 33.2 KB，而我的 o/p library.js 被转译、缩小和 ugflied 等是 33.3 KB。这是我的 webpack 配置文件：

var path = require('path');
     var webpack = require('webpack');
     var projectRoot = path.resolve(__dirname, '../');
     module.exports = {
     devtool: '#source-map',
     entry: {
       'standalone': path.join(__dirname, '../app/standalone'),
       'library': path.join(__dirname, '../app/main.js'),
     },
     output: {
        path: path.join(__dirname,'../public/dist'),
        filename: '[name].js'
     },
     resolve: {
     extensions: ['', '.js'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
      'app' : path.resolve(__dirname, '../app')
      'unit': path.resolve(__dirname, '../test/unit')
    }
  },
    resolveLoader: {
      fallback: [path.join(__dirname, '../node_modules')]
    },
     module: {
      preLoaders: [
       {
         test: /\.js$/,
         loader: 'eslint',
         include: [
           path.join(projectRoot, 'app')
         ],
         exclude: /node_modules/
         }
       ],
       loaders: [
       {
        test: /\.js$/,
        loader: 'babel',
        include: [
          path.join(projectRoot, 'app')
        ],
        exclude: /node_modules/
       }
     ]
   },  
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
     compress: {
      warnings: false
     }
    }),
   new webpack.optimize.OccurrenceOrderPlugin()
  ]
   eslint: {
    formatter: require('eslint-friendly-formatter')
   }
}

这是我的整个库没有测试和构建文件夹的样子

    -- app 
        -- module 1 folder
           -index_module1.js
        -- module 2 folder
           -index_module2.js
        -- module 3 folder
           -index_module3.js
        -- module 1 folder
           -index_module3.js
      -- main.js --------------> is my entry file which imports all (inner dependency) the above modules written in ecma 6 and does not have any node module imported

注意：我的推断是 webpack 在我的 main.js 周围添加了巨大的包装代码行，这使得它的大小等于所有源文件的总和，超出了捆绑和缩小的全部目的。

问题：

我的 webpack.config 是否配置错误？ - 考虑到它没有做任何复杂的事情
Webpack 的包装器代码用于包装所有模块等，但这会增加文件的大小（一大块） - 鉴于此，对于我的目的而言，webpack 是正确的选择，还是所有构建系统都期望它那个 transpiles->bundles->uglifies->minifies ecma 6 modules.?

根据我的理解，看起来 Webpack 是为与终端库相关的 react、vue 和/或 web 而构建的，而不是用于简单的 JS 库，这是真的吗？

【问题讨论】：

如果没有要捆绑的模块，为什么要使用 模块捆绑器？
@FelixKling 我已经更新了这个问题。不，这只是一个不需要捆绑的文件。但我有另一个使用 ES6 模块的入口文件，我也有同样的问题。打包后的输出为 33.2 KB，而未压缩的源文件（包括我所有的源文件本身）为 33.3 KB
如果没有什么要捆绑的，但你仍然想编译代码，直接使用 babel (CLI)：babeljs.io/docs/setup。
我有另一个需要捆绑的入口文件，就像使用 es6 模块一样 - 那么它的路径是什么？那么捆绑是什么意思？

标签： javascript webpack ecmascript-6

【解决方案1】：

目前，您无法摆脱 webpack 包装器代码。如果运行时开销是个问题，请检查comparison table 并使用没有开销的捆绑程序。例如Rollup 的 ES6 模块开销为 0，并且易于设置以捆绑纯 JavaScript 模块。

【讨论】：