在我的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' 
     ] 
     } 
    }] 
    } 
}