Question

我得知Webpack报告的大小与实际输出相比是巨大的

[BABEL] Note: The code generator has deoptimised the styling of "node_modules/html-webpack-plugin/node_modules/lodash/lodash.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "node_modules/moment/moment.js" as it exceeds the max of "100KB".
Hash: 115ba034c25a5de14baa
Version: webpack 1.13.1
Time: 35574ms
      Asset       Size  Chunks             Chunk Names
    dist.js     563 kB       0  [emitted]  main
dist.js.map     855 kB       0  [emitted]  main
 index.html  180 bytes          [emitted]  
   [0] multi main 28 bytes {0} [built]
    + 130 hidden modules
Child html-webpack-plugin for "index.html":
        + 4 hidden modules

输出大约20kb，也需要年龄，大约10s

CONFIG：

/* globals __dirname, process */
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var node_env = process.env.NODE_ENV || 'development';
console.log(node_env)

var config = {
  context: __dirname + '/client',
  entry: {
    main: [
      "./app.js"
    ]
  },
  output: {
    path: __dirname + "./public",
    filename: "dist.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'client'),
        ],
        exclude: /node_modules/

      },
      {
        test: /\.less$/,
        loader: "style!css!less"
      },
      {
        test: /\.css/,
        loader: "style!css"
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
      hash: true,
      filename: 'index.html',
      template: __dirname + '/client/index.html',
    })
  ]
}

if (node_env === 'production') {
  config.plugins.push(new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }));
}

module.exports = config

Answer 1

我认为问题与这些问题有关：

[BABEL] Note: The code generator has deoptimised the styling of "node_modules/html-webpack-plugin/node_modules/lodash/lodash.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "node_modules/moment/moment.js" as it exceeds the max of "100KB".

该消息来自babel-loader，遇到巨大尺寸（超过100kb）的来源。通常，在这种情况下，这意味着您（或某些依赖项）需要已经捆绑的库（lodash和moment），这些库不需要通过Babel进行处理。

解决方案是从node_modules/配置中排除babel-loader（将其添加到module.loaders的{{1}}部分）：

webpack.config.js

这是有用的，因为常见的期望是在已编译为es5的npm上发布包，因此它们通常不需要通过Babel进行处理。

Answer 2

我的项目中遇到了同样的问题：

assets / profile-view / dist / bundle.js“type =”text / babel“＆gt;

但是从代码中删除{type =“text / babel”}属性后，错误消息消失了

Webpack报告的规模与实际产量相比是巨大的

2 个答案: