Question

使用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是我的目的的正确选择，或者它是否适用于所有构建系统那个翻译 - ＆gt; bundles-＆gt; uglifies-＆gt;缩小了ecma 6模块。？

根据我的理解，看起来Webpack是为了使用来自最终库的react，vue和web相关而不是简单的JS库而构建的，这是真的吗？

Answer 1

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

Webpack - 增加了JS库的大小

1 个答案: