Question

有一些gulp文件可以实例化webpackConfig对象。原始代码来自this boilerplate repo。

例如，在dev.js（原始回购中出现的那个）

import gulp from 'gulp';
import gutil from 'gulp-util';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import webpackConfig from './../webpack.config.js';

gulp.task('dev', () => {
  const config = webpackConfig(true);
  new WebpackDevServer(webpack(config), {
    contentBase: './www',
    hot: true,
    stats: {
      colors: true
    }
  }).listen(8080, 'localhost', (err) => {
    if (err) throw new gutil.PluginError('webpack-dev-server', err);
    gutil.log('[webpack-dev-server]', 'http://localhost:8080/webpack-dev-server/index.html');
  });
});

这是我的prod.js文件

import gulp from 'gulp';
import webpack from 'webpack';
import webpackConfig from './../webpack.config.js';

gulp.task('prod', () => {
  const config = webpackConfig(false);
  webpack(config);
});

非常简单，我不关心服务器，我希望webpack能够完成它的工作并捆绑文件。

在webpack.config.js我有

import path from 'path';
import webpack from 'webpack';

export default function webPackConfig(isDevelopment) {
  let jsLoaders;
  let plugins;

  if (isDevelopment) {
    jsLoaders = ['react-hot', 'babel-loader'];
    plugins = [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new webpack.DefinePlugin({
        __DEV__: true
      })
    ];
  } else {
    jsLoaders = ['babel-loader'];
    plugins = [
      new webpack.DefinePlugin({
        __DEV__: false
      })
    ];
  }

  const config = {
    entry: {
      mobile: './src/index.jsx', // <----- ACCORDING TO THE DOCS
      web: './src/web.jsx'
    },
    output: {
      path: path.resolve('./dist'),
      filename: '[name]-bundle.js' // <---- THIS SHOULD BE ENOUGH
    },
    resolve: {
      extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
    },
    module: {
      preLoaders: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      }],
      loaders: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: jsLoaders
      }, {
        test: /\.(css|scss$)/,
        loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
      }, {
        test: /\.(png|jpg|woff|woff2|gif|ttf|eot|svg)$/,
        loader: 'url-loader?prefix=./&limit=8192'
        // loader: 'file-loader?name=[path][name].[ext]',
      }]
    },
    plugins: plugins
  };

  console.log('\n\n' + JSON.stringify(config) + '\n\n');
  if (isDevelopment) {
    config.debug = true;
    config.devtool = 'eval';
    return config;
  }

  return config;
}

根据网络上的许多消息来源，这足以让webpack生成两个不同的包，但是没有文件。

此外，控制台显示：

-> % npm run dev

[...]
           Asset    Size  Chunks             Chunk Names
mobile-bundle.js  1.2 MB       0  [emitted]  mobile
   web-bundle.js  843 kB       1  [emitted]  web

显然文件是捆绑的（？）但不写入磁盘。

-> % npm run prod

[18:51:21] Failed to load external module babel-register
[18:51:21] Requiring external module babel-core/register
[18:51:23] Using gulpfile ~/repos/test_applications/react-redux-cordova-boilerplate/gulpfile.babel.js
[18:51:23] Starting 'prod'...
[18:51:23] Finished 'prod' after 23 ms

同样，没有文件。

有什么想法吗？我做错了什么？

webpack拒绝构建包含多个条目的包

0 个答案: