Question

我需要进行代码拆分并按需加载一些React组件和其他脚本，我只需这样做：

<Route path="/journal" getComponent={function (nextState, cb) {

    require.ensure([], function (require) {
        cb(null, require("./components/Journal"));
    })

}} />

在开发过程中，只需运行webpack就可以了。

但是对于生产构建，我运行webpack -p，然后我总是得到错误：

Uncaught TypeError: Cannot read property 'call' of undefined
    at e (bootstrap a99e046…:50)

第50行是：

// Execute the module function
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

可能是什么问题？

我的webpack配置：

var webpack = require('webpack');
var merge = require('webpack-merge');
var validate = require('webpack-validator');
var parts = require('./webpack.parts');

var common = {
  entry: {
    vendor: ['react', 'react-dom', 'lodash'],
  },
  output: {
    filename: "index.bundle.js",
    path: __dirname + '/public/js/',
    publicPath: __dirname + '/public/js/'
  },
  plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: 3,
        filename: "vendor.bundle.js"
      })
  ]
};

var config;
switch(process.env.npm_lifecycle_event) {
  case 'build':
    config = merge(common,
        {
            devtool: 'source-map',
            entry: {
                app: [ __dirname + '/src/index.js']
            },
            module: {
                loaders: [
                    {test: /\.js$/, exclude: /node_modules/, loaders: ["babel-loader"]}
                ]
            }
        },
        parts.productionOptimize()
    );
    break;
  default:
      config = merge(
          common,
          {
              devtool: 'eval-source-map',
              entry: {
                  app: ['webpack-hot-middleware/client', __dirname + '/src/index.js']
              },
              module: {
                  loaders: [
                      {test: /\.js$/, exclude: /node_modules/, loaders: ["react-hot","babel-loader"]}
                  ]
              }
          },
          parts.devServer({
              host: process.env.HOST,
              port: process.env.PORT
          })
      );
}

module.exports = validate(config);

webpack.parts.js

var webpack = require('webpack');

exports.devServer = function(options) {
    return {
        devServer: {
            historyApiFallback: true,
            inline: true,
            hot: true,
            stats: 'errors-only',
            host: options.host,
            port: options.port
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin({
                multistep: true
            })
        ]
    };
}

exports.productionOptimize = function () {
    return {
        plugins: [
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify('production')
                }
            }),
            new webpack.optimize.UglifyJsPlugin()
        ]
    }
}

Answer 1

我做错了，publicPath不应该是绝对的：

我改变了

publicPath: __dirname + '/public/js/'

到

publicPath: '/js/'

Webpack require.ensure错误--optimize - 最小化

1 个答案: