缺少webpack配置输出中的一步

Question

我一直在尝试按照GitHub上的electron-react-boilerplate示例设置我的webpack.config.prod.js文件。

这是我的webpack.config.prod.js文件：

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: ['babel-polyfill', './main.js'],

  output: {
    path: __dirname,
    filename: 'main.prod.js'
  },

  node: {
    __dirname: false,
    __filename: false
  },

  target: 'electron-main',
  externals: [nodeExternals()],

  module: {
    rules: [
        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['react', 'es2015', 'stage-3']
            }
        },
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
        { test: /.(ttf|eot|otf|svg)(\?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader" },
    ],
  },

  plugins: [
    new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$")),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.WEBPACK_DEV': JSON.stringify('production')
    }),
  ]
}

因此，此文件将main.prod.js输出到根目录，很酷。

我在electron-react-boilerplate项目中看到，有2个webpack文件，config.base和config.main.prod.js导入config.base并执行merge.smart以base配置为起点。

这里是Github项目的基本配置：

import path from 'path';
import webpack from 'webpack';
import { dependencies as externals } from './app/package.json';

export default {
  externals: Object.keys(externals || {}),

  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      }
    }]
  },

  output: {
    path: path.join(__dirname, 'app'),
    filename: 'bundle.js',
    // https://github.com/webpack/webpack/issues/1114
    libraryTarget: 'commonjs2'
  },

  /**
   * Determine the array of extensions that should be used to resolve modules.
   */
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    modules: [
      path.join(__dirname, 'app'),
      'node_modules',
    ],
  },

  plugins: [
    new webpack.NamedModulesPlugin(),
  ],
};

和Github项目中的webpack.config.main.prod.js

import webpack from 'webpack';
import merge from 'webpack-merge';
import BabiliPlugin from 'babili-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import baseConfig from './webpack.config.base';

export default merge.smart(baseConfig, {
  devtool: 'source-map',

  target: 'electron-main',

  entry: ['babel-polyfill', './app/main.dev'],

  // 'main.js' in root
  output: {
    path: __dirname,
    filename: './app/main.prod.js'
  },

  plugins: [
    /**
     * Babli is an ES6+ aware minifier based on the Babel toolchain (beta)
     */
    new BabiliPlugin(),

    new BundleAnalyzerPlugin({
      analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
      openAnalyzer: process.env.OPEN_ANALYZER === 'true'
    }),

    /**
     * Create global constants which can be configured at compile time.
     *
     * Useful for allowing different behaviour between development builds and
     * release builds
     *
     * NODE_ENV should be production so that modules do not perform certain
     * development checks
     */
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
      'process.env.DEBUG_PROD': JSON.stringify(process.env.DEBUG_PROD || 'false')
    })
  ],

  /**
   * Disables webpack processing of __dirname and __filename.
   * If you run the bundle in node.js it falls back to these values of node.js.
   * https://github.com/webpack/webpack/issues/2010
   */
  node: {
    __dirname: false,
    __filename: false
  },
});

注意两个配置文件中的两个output，一个输出到./dist/bundle.js，另一个输出到./app/main.prod.js。

在我的项目中，现在我没有任何关于/dist/bundle.js的概念，所以当我构建我的应用并运行它时，我只得到一个没有css / js的白色屏幕。

我知道我需要在我的index.html文件中包含读取bundle.js脚本，现在没有任何内容写到bundle.js文件中，所以我需要解决这个问题。

我不确定如何解决这个问题，所以任何帮助都将不胜感激。谢谢！

编辑：添加我的应用的package.json

{
  "name": "myApp",
  "productName": "myApp",
  "version": "0.0.1",
  "main": "main.prod.js",
  "devDependencies": {
    "babel-core": "^6.7.2",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-3": "^6.17.0",
    "cross-env": "^5.0.1",
    "css-loader": "^0.23.1",
    "electron": "^1.6.11",
    "electron-packager": "^8.7.1",
    "electron-rebuild": "^1.1.3",
    "eslint": "^3.13.1",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-react": "^6.9.0",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.29.0",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^4.2.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.0",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.4",
    "webpack-node-externals": "^1.6.0"
  },
  "scripts": {
    "start": "./node_modules/.bin/electron .",
    "watch": "./node_modules/.bin/webpack-dev-server",
    "electron-rebuild": "./node_modules/.bin/electron-rebuild",
    "webpack": "webpack --config webpack.config.prod.js --optimize-minimize",
    "package": "electron-packager . --mac --icon='./assets/icons/mac/icon.icns' --overwrite"
  },
  "dependencies": {
    "babel-polyfill": "^6.22.0",
    "dotenv": "^4.0.0",
    "electron-context-menu": "^0.8.0",
    "gl-react": "^2.2.9",
    "gl-react-hue-rotate": "^1.1.0",
    "isomorphic-fetch": "^2.2.1",
    "rc-slider": "^6.1.0",
    "react": "15.4.2",
    "react-dnd": "^2.2.4",
    "react-dnd-html5-backend": "^2.2.4",
    "react-dom": "15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^5.0.0-alpha.6",
    "redux": "^3.6.0",
    "redux-saga": "^0.14.3",
    "tinycolor2": "^1.4.1"
  }
}