我的 webpack 配置有一些问题，我想我对我正在使用的目录结构感到困惑

Question

我正在尝试学习 webpack，我想我对 __dirname 感到困惑，并让正确的入口文件工作。基本上我要使用的文件在app/index.js，我的server.js和webpack.config.js在config/。

当我将server.js 和webpack.config.js 保留在根目录中时，我的工作正常，但我想将其移动到config 文件夹中，并且我还添加了一个app 文件夹而不是保留内容app 现在在根目录中。

我的文件结构如下：

.
|++[app]
|----[actions]
|----[modules]
|----[reducers]
|----[store]
|----index.html
|----index.js
|--[config]
|----server.js
|----webpack.config.js
|--[node_modules]
|--package.json

我的server.js 中有以下内容：

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');
var path = require('path');
var app = new (require('express'))();
var port = 9001;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));

app.get('/*', function(req, res) {
  res.sendFile(path.resolve(__dirname) + 'app/index.html');
});

app.listen(port, function(error) {
  if (error) {
    console.error(error);
  } else {
    console.info('started on localhost://%s.', port);
  }
});

还有webpack.config.js：

var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var isProd = process.env.NODE_ENV === 'production';

module.exports = {
  devtool: isProd ? null : 'source-map',
  entry: 'app/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  resolve: {
    root: path.resolve(__dirname, 'app'),
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: [
          'react-hot',
          'babel'
        ],
        include: path.join(__dirname, ''),
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'file-loader?name=img/[name].[ext]'
      },
      {
        test: /\.scss$/,
        loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!postcss!sass'
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  postcss: [
    autoprefixer({ browsers: ['last 3 versions'] })
  ]
};

Answer 1

如果有帮助，以下是我当前的 webpack 配置

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

export default {
  target: 'node',
  node: {
    // prevents webpack from overwriting the values from node
    // https://github.com/webpack/webpack/issues/1599
    __dirname: false,
    __filename: false
  },
  devtool: 'source-map',
  resolve: {
    root: path.resolve(__dirname + '/app'),
    extensions: ['', '.js']
  },
  entry: {
    server: './app/app'
  },
  output: {
    path: path.join(__dirname + '/../dist'),
    filename: '[name].bundle.js',
    libraryTarget: 'commonjs'
  },
  // prevents node_modules from being bundled by webpack
  externals: [/^(?!\.|\/).+/i,],
  module: {
    loaders: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /(node_modules|dist)/,
      cacheDirectory: 'webpack-cache',
      query: {
        presets: ['es2015'],
        plugins: [
          'transform-runtime',
          'transform-async-to-generator'
        ]
      }
    }]
  }
}